[Day 12] 幫格子確認關係⸺表格的scope與headers屬性

17th鐵人賽前端迷走中

團隊好想工作室 v 9.0

2025-09-26 23:22:50

18 瀏覽

分享至

昨天我們介紹了怎麼為表格添加標題或說明、劃分結構，還有將欄分成不同群組，讓我們的表格更清楚也更有結構。

不過即使這麼設定，一旦表格複雜起來，有跨行或跨欄的格子，對使用朗讀等無障礙功能瀏覽網頁的使用者來說，可能就不是那麼好理解。

因此我們需要定義格子與欄/列標題之間的關係，讓瀏覽器清楚格子所對應的欄/列標題是哪個格子。

判斷格子對應的欄/列標題

在表格中使用<th>元素，不僅會在視覺上，區隔出標題欄跟標題列與一般的格子。在意義上，也會讓標題欄跟標題列有別於一般的格子。

因此使用無障礙功能瀏覽網頁的表格時，能透過<th>元素識別每一格對應的欄標題與列標題為何。將兩者組合在一起後，便能幫助使用者解讀每一格資料的含義。[1]

但這樣的識別是基於一些規則去推算出來的，用在簡單的表格還可以，一旦表格變得複雜就可能會出錯。

像是另外對<th>元素設定了colspan或rowspan屬性，讓它變成跨欄的欄標題或跨列的列標題。

這時候就需要透過<th>元素的scope屬性，或設定<th>與<td>元素的id與headers屬性，更明確的定義標題本身的類型，以及格子之間的關係。

以`scope`屬性設定標題種類

<th>的scope屬性能明確定義<th>元素本身是針對哪些格子的標題。有以下四種屬性值可以設定，分別代表不同的標題。如果沒有設定，會根據元素所在環境自動判斷是哪種：[2]

row
同一列後面其他格子的列標題。
col
同一欄後面其他格子的欄標題。
rowgroup
同一個列群組中的其他所有格子的列標題。
colgroup
同一個欄群組中的其他所有格子的欄標題。

rowgroup跟colgroup的意思比較難理解。簡單來說，rowgroup是指當一列同時有多個列標題，設定為這個值的<th>元素會是其他列標題的列標題。colgroup的意思同樣類推，就是指其他欄標題的欄標題。 [1]

但需要注意的是，如果要將scope屬性值設定為rowgroup或colgroup，則元素本身需要處在一個列群組或欄群組中，不然會是無效設定。實際上要怎麼判斷，規範雖然有列出流程，但太過複雜，就先帶過～

即便網頁中有複雜的表格，經過合適設定scope屬性，也能依據<th>元素的定義，判斷不同格子對應的欄標題跟列標題是什麼。進而幫助以無障礙功能瀏覽網頁的使用者解讀表格內容。

以下由MDN提供的範例中，表格的標題列有兩層，分別是商品的大類別跟子類別。像是大類別的衣服下還分成褲子、群組跟洋裝等三種子類別。

因此設定scope屬性值，將主要列標題（商品大類別）設為colgroup，將次要列標題（商品子類別）設為col。標題欄同樣分成兩層，也做了類似設定。由此便在語意上，表明標題之間的層級關係。

同時也對主標題，設定了colspan或rowspan屬性，讓主標題跨欄或跨列，涵蓋所有的次標題。在視覺上，呈現標題之間的層級關係。

<table>
  <caption>
    Items Sold August 2016
  </caption>
  <thead>
    <tr>
      <td colspan="2" rowspan="2"></td>
      <th colspan="3" scope="colgroup">Clothes</th>
      <th colspan="2" scope="colgroup">Accessories</th>
    </tr>
    <tr>
      <th scope="col">Trousers</th>
      <th scope="col">Skirts</th>
      <th scope="col">Dresses</th>
      <th scope="col">Bracelets</th>
      <th scope="col">Rings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" scope="rowgroup">Belgium</th>
      <th scope="row">Antwerp</th>
      <td>56</td>
      <td>22</td>
      <td>43</td>
      <td>72</td>
      <td>23</td>
    </tr>
    ...
  </tbody>
</table>

以`headers`屬性設定對應標題

除了scope屬性，透過設定格子的id與headers屬性，也能幫助無障礙功能的使用者理解複雜表格的內容。不過兩種方式的意義有些差別。

scope屬性是先定義<th>元素本身屬於哪種標題。後續判斷其他格子對應哪些欄/列標題時，再間接參考這個值來判斷。
headers屬性則是直接定義每一個格子對應的標題是哪些<th>元素。

為了直接定義格子間的關係，headers屬性會搭配id屬性使用。先將欄/列標題設定id屬性值。接著在其他格子的headers屬性裡，一一填入對應標題的id屬性值，並以空格區隔不同標題的值。

以下由MDN提供的另一個例子，改用headers與id屬性，處理先前scope範例的表格。

在標題列，將商品分成衣服、配件兩個大類別，還有大類別之下的褲子、群組等子類別。並為這些作為標題的大類別跟子類別，設定id屬性值。

在次要列標題中，除了設定自己的id屬性值供底下的資料格子參考，也在headers屬性裡填入主要列標題的id屬性值，定義標題間的層級關係。

表格另外還有標題欄，同樣分成主標題與次標題，分別表示國家與城市。跟標題列一樣，也用headers與id屬性定義其層級關係。

填入商品售出數量的每個資料格子，其headers屬性裡則依序填入四個id屬性值，分別代表這個格子對應的主要列標題（商品大類別）、次要列標題（商品子類別）、主要欄標題（國家）、次要欄標題（地區）。

主標題同時也設定了colspan或rowspan屬性，讓主標題跨欄或跨列。以便在視覺上，呈現出標題之間的層級關係。

<table>
  <caption>
    Items Sold August 2016
  </caption>
  <thead>
    <tr>
      <td colspan="2" rowspan="2"></td>
      <th colspan="3" id="clothes">Clothes</th>
      <th colspan="2" id="accessories">Accessories</th>
    </tr>
    <tr>
      <th id="trousers" headers="clothes">Trousers</th>
      <th id="skirts" headers="clothes">Skirts</th>
      <th id="dresses" headers="clothes">Dresses</th>
      <th id="bracelets" headers="accessories">Bracelets</th>
      <th id="rings" headers="accessories">Rings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th rowspan="3" id="belgium">Belgium</th>
      <th id="antwerp" headers="belgium">Antwerp</th>
      <td headers="antwerp belgium clothes trousers">56</td>
      <td headers="antwerp belgium clothes skirts">22</td>
      <td headers="antwerp belgium clothes dresses">43</td>
      <td headers="antwerp belgium accessories bracelets">72</td>
      <td headers="antwerp belgium accessories rings">23</td>
    </tr>
    <tr>
    ...
  </tbody>
</table>