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

5.2:H105101 表格中超過二行/列以上的標題,須以結構化的標記確認彼此間的結構與關係

正確示範

使用scope屬性來為表格中的資料確定之間的結構與關係。

正確範例:

  <TABLE border="1" 
  summary="這個表格是顯示每位國會議員消費的咖啡數量、咖啡種類與他們是否在咖啡裡加糖。">
  <CAPTION>每位國會議員購買的咖啡數量</CAPTION>
  <TR>
  <TH scope="col">議員姓名</TH>
  <TH scope="col">消費咖啡杯數</TH>
  <TH scope="col" abbr="Type">咖啡種類</TH>
  <TH scope="col">是否加糖?</TH>
  </TR>
  <TR>
  <TD>李小安</TD>
  <TD>10</TD>
  <TD>摩卡</TD>
  <TD>是</TD>
  </TR>
  <TR>
  <TD>吳大義</TD>
  <TD>5</TD>
  <TD>拿鐵</TD>
  <TD>否</TD>
  </TR>
  </TABLE>
          

使用axis屬性、headers屬性及id屬性來為表格中的資料確定之間的結構與關係。

正確範例:

<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>
          
網頁內容結束分隔線