跳到主要內容
:::|

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

說明:當表格儲存格中的資訊必須結合欄位行/列的標題作整體閱讀時,網頁開發者就必須針對儲存格所屬之表格中的行/列標題,提供內容從屬性的相關標示,以利語音合成器判讀表格中的資訊。

範例:使用scope屬性來呈現表格資料之間的結構關係:

正確示範

scope屬性的示範:

    <TR>

      <TH scope="col">議員姓名</TH>

      <TH scope="col">消費咖啡杯數</TH>

      <TH scope="col" abbr="種類">咖啡種類</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>

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

asix屬性正確示範:

<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>

      <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>

上一頁| 回首頁