HTML 表格高階功能和可訪問性

您可以透過將標題放在 <caption> 元素內，並將該元素巢狀在 <table> 元素內，為表格新增標題。您應該將其放在開啟的 <table> 標籤的正下方。

<table>
  <caption>
    Dinosaurs in the Jurassic period
  </caption>

  …
</table>

如您從上面的簡短示例中推斷的那樣，標題旨在包含對錶格內容的描述。這對於所有希望快速瞭解表格是否對他們有用的讀者來說很有用，因為他們瀏覽頁面時，但對盲人使用者尤其如此。與其讓螢幕閱讀器讀出許多單元格的內容只是為了找出表格的內容，不如讓使用者依賴標題，然後決定是否更詳細地閱讀表格。

標題放在 <table> 標籤的正下方。

讓我們嘗試一下，重新審視我們在上一篇文章中首次遇到的示例。

1. 開啟您語言老師的學校時間表，該時間表來自 HTML 表格基礎 的末尾，或建立我們 timetable-fixed.html 檔案的本地副本。
2. 為表格新增一個合適的標題。
3. 儲存您的程式碼並在瀏覽器中開啟它，以檢視它的外觀。

隨著表格在結構上變得更加複雜，使用 <thead>、<tbody> 和 <tfoot> 為其提供更多結構定義非常有用，這些元素允許您標記表格的表頭、表體和表尾部分。

這些元素不會使表格對螢幕閱讀器使用者更易訪問，也不會獨立地導致任何視覺增強。但是，它們對樣式和佈局非常有用——充當新增 CSS 到表格的有用鉤子。為了給您一些有趣的示例，對於長表格，您可以使表格的表頭和表尾在每頁列印時重複，並且您可以使表格主體顯示在一頁上，並且內容可透過上下滾動訪問。

要使用它們，應按以下順序包含它們

• <thead> 元素必須包含表格的表頭部分——這通常是包含列標題的第一行，但這並不總是這樣。如果您使用的是 <col>/<colgroup> 元素，則表格標題應放在這些元素的正下方。
• <tbody> 元素需要包含表格內容的主體部分，而不是表格的表頭或表尾。
• <tfoot> 元素需要包含表格的表尾部分——這可能是一行，其中包含前幾行中專案的總和，例如。

讓我們將這些新元素付諸行動。

1. 首先，建立一個 spending-record.html 和 minimal-table.css 的本地副本到一個新資料夾中。
2. 嘗試在瀏覽器中開啟它——您會看到它看起來還可以，但可以改進。包含已支出金額總和的“SUM”行似乎位置不對，程式碼中還有一些細節缺失。
3. 將明顯的標題行放在 <thead> 元素中，“SUM”行放在 <tfoot> 元素中，其餘內容放在 <tbody> 元素中。
4. 儲存並重新整理，您將看到新增 <tfoot> 元素已導致“SUM”行向下移到表格底部。
5. 接下來，新增一個 colspan 屬性，使“SUM”單元格跨越前四列，以便實際數字出現在“Cost”列的底部。
6. 讓我們為表格新增一些簡單的額外樣式，以便您瞭解這些元素對應用 CSS 的作用有多大。在 HTML 文件的頭部，您將看到一個空的 <style> 元素。在該元素內，新增以下幾行 CSS 程式碼
   css

   tbody {
     font-size: 95%;
     font-style: italic;
   }
   
   tfoot {
     font-weight: bold;
   }
   

7. 儲存並重新整理，看看結果。如果沒有 <tbody> 和 <tfoot> 元素，您將不得不編寫更復雜的選擇器/規則才能應用相同的樣式。

完成後的表格應該看起來像這樣

只要您包含完整的結構，包括 <table> 元素，就可以將一個表格巢狀在另一個表格中。這通常並不建議這樣做，因為它會使標記更令人困惑，並且對螢幕閱讀器使用者更難以訪問，並且在許多情況下，您也可以簡單地在現有表格中插入額外的單元格/行/列。但是，有時這是必要的，例如，如果您想輕鬆地從其他來源匯入內容。

以下標記顯示了一個簡單的巢狀表格

<table id="table1">
  <tr>
    <th>title1</th>
    <th>title2</th>
    <th>title3</th>
  </tr>
  <tr>
    <td id="nested">
      <table id="table2">
        <tr>
          <td>cell1</td>
          <td>cell2</td>
          <td>cell3</td>
        </tr>
      </table>
    </td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
</table>

其輸出看起來像這樣

table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid black;
  padding: 10px 20px;
}

讓我們簡要回顧一下我們如何使用資料表格。表格是一個方便的工具，可以讓我們快速訪問資料，並讓我們查詢不同的值。例如，只需快速瀏覽下面的表格，就可以找到 2016 年 8 月在根特銷售了多少枚戒指。為了理解它的資訊，我們在這個表格中的資料與其列和/或行標題之間建立了視覺聯絡。

但是，如果您無法建立這些視覺聯絡呢？那麼您如何閱讀上面的表格呢？視力障礙者通常使用螢幕閱讀器，螢幕閱讀器會向他們朗讀網頁上的資訊。當您閱讀純文字時，這沒問題，但解釋表格對盲人來說可能是一個不小的挑戰。然而，透過適當的標記，我們可以用程式設計的聯絡來代替視覺的聯絡。

本文的這一部分提供了使表格儘可能無障礙的其他技術。

螢幕閱讀器將識別所有標題，並使用它們在這些標題與其相關的單元格之間建立程式設計的聯絡。列標題和行標題的組合將識別和解釋每個單元格中的資料，以便螢幕閱讀器使用者可以像視力正常的使用者一樣解釋表格。

我們已經在上一篇文章中介紹了標題——參見 使用 <th> 元素新增標題。

本文的一個新主題是 scope 屬性，該屬性可以新增到 <th> 元素中，以告知螢幕閱讀器標題究竟是哪個單元格的標題——例如，它是其所在行的標題，還是列的標題？回顧我們前面提到的支出記錄示例，您可以明確地將列標題定義為列標題，如下所示

<thead>
  <tr>
    <th scope="col">Purchase</th>
    <th scope="col">Location</th>
    <th scope="col">Date</th>
    <th scope="col">Evaluation</th>
    <th scope="col">Cost (€)</th>
  </tr>
</thead>

並且每行都可以像這樣定義標題（如果我們添加了行標題以及列標題）

<tr>
  <th scope="row">Haircut</th>
  <td>Hairdresser</td>
  <td>12/09</td>
  <td>Great idea</td>
  <td>30</td>
</tr>

螢幕閱讀器將識別像這樣結構化的標記，並允許其使用者一次讀出整列或整行，例如。

scope 還有兩個可能的取值——colgroup 和 rowgroup。這些用於位於多個列或行之上的標題。如果您回頭看看本文開頭部分的“2016 年 8 月銷售的商品”表格，您將看到“衣服”單元格位於“褲子”、“裙子”和“連衣裙”單元格的正上方。所有這些單元格都應標記為標題 (<th>)，但“衣服”是一個位於頂部的標題，它定義了其他三個子標題。“衣服”因此應獲得 scope="colgroup" 屬性，而其他則應獲得 scope="col" 屬性

<thead>
  <tr>
    <th colspan="3" scope="colgroup">Clothes</th>
  </tr>
  <tr>
    <th scope="col">Trousers</th>
    <th scope="col">Skirts</th>
    <th scope="col">Dresses</th>
  </tr>
</thead>

相同規則也適用於多個分組行的標題。再次檢視“2016 年 8 月銷售的商品”表格，這次重點關注帶有“阿姆斯特丹”和“烏特勒支”標題 (<th>) 的行。您會注意到，“荷蘭”標題（也標記為 <th> 元素）跨越兩行，是另外兩個子標題的標題。因此，應在此標題單元格上指定 scope="rowgroup"，以幫助螢幕閱讀器建立正確的關聯

<tr>
  <th rowspan="2" scope="rowgroup">The Netherlands</th>
  <th scope="row">Amsterdam</th>
  <td>89</td>
  <td>34</td>
  <td>69</td>
</tr>
<tr>
  <th scope="row">Utrecht</th>
  <td>80</td>
  <td>12</td>
  <td>43</td>
</tr>

使用 id 和 headers 屬性來建立標題和單元格之間的關聯，是使用 scope 屬性的另一種方法。

headers 屬性接受一個無序的、用空格分隔的 字串 列表，每個字串對應一個提供資料單元格 (<td> 元素) 或另一個標題單元格 (<th> 元素) 的標題的 <th> 元素的唯一 id。

這使您的 HTML 表格對錶格中每個單元格的位置有了明確的定義，該位置由每個單元格所屬的列和行的標題定義，有點像電子表格。為了使其正常工作，表格確實需要列標題和行標題。

回到我們的“2016 年 8 月銷售的商品”示例，我們可以像這樣使用 id 和 headers 屬性

1. 在表格的每個<th>元素中新增一個唯一的id。
2. 在每個充當副標題的<th>元素中新增一個headers屬性，例如，具有上方的標題元素。該值是位於頂部的標題的id，它定義了副標題，在本例中，對於列標題是"clothes"，對於行標題是"belgium"。
3. 在每個<td>元素中新增headers屬性，並新增相關<th>元素的id，以空格分隔的列表形式。你可以像在電子表格中那樣進行操作：找到資料單元格，並搜尋相應的行和列標題。指定id的順序無關緊要，但應該保持一致以保持組織。

<thead>
  <tr>
    <th id="clothes" colspan="3">Clothes</th>
  </tr>
  <tr>
    <th id="trousers" headers="clothes">Trousers</th>
    <th id="skirts" headers="clothes">Skirts</th>
    <th id="dresses" headers="clothes">Dresses</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="belgium" rowspan="3">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>
  </tr>
</tbody>

1. 在最後這個練習中，我們希望您首先在新的目錄中建立items-sold.html和minimal-table.css的本地副本。
2. 現在嘗試新增適當的scope屬性，使這個表格更易於訪問。
3. 最後，嘗試建立啟動檔案的另一個副本，這次透過使用id和headers屬性建立精確且明確的關聯，使表格更易於訪問。

關於 HTML 中表格，你還可以學習一些其他內容，但目前這些知識就足夠了。接下來，你可以透過我們的HTML 表格評估進行自測。玩得開心！

如果你已經開始學習 CSS 並且在評估中取得了不錯的成績，你可以繼續學習如何為 HTML 表格新增樣式——參見表格樣式。

如果你想開始學習 CSS，請檢視CSS 學習區域！

• 上一個
• 概述：HTML 表格
• 下一個