無障礙網路空間服務網無障礙網路空間服務網

5.5:H305004 表格須提供表格摘要說明(如summary屬性)

不良設計

沒有在TABLE標籤中使用summary屬性提供表格摘要說明。

不良設計:

  <TABLE border="1">
  <CAPTION>
  台灣主要城市氣溫與紫外線強度
  </CAPTION>
  <TR>
  <TH>主要城市</TH>
  <TH>氣溫溫度</TH>
  <TH>紫外線強度</TH>
  </TR>
  <TR>
  <TD>台北</TD>
  <TD>35度</TD>
  <TD>普通</TD>
  </TR>
  <!--表格內容略-->
  </TABLE>
          

正確示範

有使用summary屬性來為提供詳細的表格說明。

正確範例:

  <TABLE border="1" summary="此台灣主要城市氣溫與紫外線強度表格中,
  第一直欄是主要城市,第二直欄是氣溫溫度,第三直欄是紫外線強度。">
  <CAPTION>
  台灣主要城市氣溫與紫外線強度
  </CAPTION>
  <TR>
  <TH>主要城市</TH>
  <TH>氣溫溫度</TH>
  <TH>紫外線強度</TH>
  </TR>
  <TR>
  <TD>台北</TD>
  <TD>35度</TD>
  <TD>普通</TD>
  </TR>
  <!--表格內容略-->
  </TABLE>
          

正確範例:

  <TABLE border="1" summary="此表格是王小強與李大明的旅行開支表,表格分為
  五直欄,第一直欄標示兩人的消費日期,第二三四五直欄則依序為該日期的餐飲
  費、住宿費、交通費以及小計,而在最後一橫列有總計資料。">
  <CAPTION>旅行開支表</CAPTION>
  <TR>
  <TH></TH>
  <TH id="a2" axis="費用">餐飲費</TH>
  <TH id="a3" axis="費用">住宿費</TH>
  <TH id="a4" axis="費用">交通費</TH>
  <TD>小計</TD>
  </TR>
  <TR>
  <TH id="a6" axis="姓名">王小強</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
  </TR>
  <TR>
  <TD id="a7" axis="日期">92年10月18日</TD>
  <TD headers="a6 a7 a2">350</TD>
  <TD headers="a6 a7 a3">1200</TD>
  <TD headers="a6 a7 a4">240</TD>
  <TD></TD>
  </TR>
  <TR>
  <TD id="a8" axis="日期">92年10月19日</TD>
  <TD headers="a6 a8 a2">400</TD>
  <TD headers="a6 a8 a3">1500</TD>
  <TD headers="a6 a8 a4">300</TD>
  <TD></TD>
  </TR>
  <TR>
  <TD>小計</TD>
  <TD>750</TD>
  <TD>2700</TD>
  <TD>540</TD>
  <TD>3990</TD>
  </TR>
  <TR>
  <TH id="a10" axis="姓名">李大明</TH>
  <TH></TH>
  <TH></TH>
  <TH></TH>
  <TD></TD>
  </TR>
  <TR>
  <TD id="a11" axis="日期">92年10月20日</TD>
  <TD headers="a10 a11 a2">310</TD>
  <TD headers="a10 a11 a3">1350</TD>
  <TD headers="a10 a11 a4">320</TD>
  <TD></TD>
  </TR>
  <TR>
  <TD id="a12" axis="日期">92年10月21日</TD>
  <TD headers="a10 a12 a2">440</TD>
  <TD headers="a10 a12 a3">1740</TD>
  <TD headers="a10 a12 a4">230</TD>
  <TD></TD>
  </TR>
  <TR>
  <TD>小計</TD>
  <TD>750</TD>
  <TD>3090 </TD>
  <TD>550</TD>
  <TD>4390</TD>
  </TR>
  <TR>
  <TH>總計</TH>
  <TD>1500</TD>
  <TD>5790</TD>
  <TD>1090</TD>
  <TD>8380</TD>
  </TR>
  </TABLE>
          
網頁內容結束分隔線