若要將 HTML 值與涵蓋多列的標頭建立關聯，請定義一個列群組，並使用 scope="rowgroup"。對於更複雜的關係，請為標頭指定唯一 ID，並在每個資料儲存格的 headers 屬性中列出這些 ID。本指南將在 Mac 上使用 TextEdit 建立本機範例。

目標是建立一個 HTML 表格，讓標籤跨越多列時，值仍保有其脈絡。W3C 在不規則表格教學中說明群組標頭，並在多層級標頭教學中說明明確關聯。

您的表格需要哪種關聯？

先寫下理解某個值所需的標籤。在下方的合成範例中，數值 40 表示 Alpha 組中大型變體的寬度，單位為毫米。因此，其完整脈絡是 Alpha、大型和寬度。所有尺寸都是示意用的範例資料。

編輯前請先使用這份判斷指南：

表格結構 要使用的關聯 結構需求
標頭標示一個一般資料列 scope="row" 將標頭放在該列的 th 儲存格中
標頭標示一個一般資料欄 scope="col" 將標頭放在該欄的 th 儲存格中
標頭標示整個資料列群組 scope="rowgroup" 將這些列放在各自的 tbody 中
某個值需要多個標頭，或表格中的關係會改變 唯一標頭 ID 與 headers 清單 明確指出每個適用的標頭

scope 值描述關係；rowspan 則描述儲存格跨越多少列。較高的標頭仍需要適當的關聯方式。MDN 在其表格標頭元素參考資料中分別說明這兩個屬性。

對於一般群組，W3C 的模式會將跨列標頭與獨立的 tbody 和 scope="rowgroup" 結合使用。一個表格可以包含數個資料列群組。將標頭列保留在 thead 中；頁尾中跨列的標頭則應放在 tfoot 中。W3C：具有不規則標頭的表格。

對於複雜的表格，明確關聯讓您可以直接說明某個值的完整意義。W3C 建議在標頭欄會變動，以及儲存格與三個或更多標頭相關聯等模式中使用此方法。完整範例會在結構性的 scope 屬性之外使用明確清單，讓每個數值都列出其三個標頭。W3C：具有多層級標頭的表格。

在 TextEdit 中建立 HTML 文件

練習時請使用新的本機檔案。如果您要修改現有文件，請先另存一份副本，以便將原始值和順序與修改後的內容進行比較。

  1. 開啟 TextEdit，並選擇 File > New。
  2. 選擇 Format > Make Plain Text。
  3. 貼上下方的完整文件，不包括 Markdown 程式碼圍欄標記。
  4. 選擇 File > Save，並將檔案命名為 table-headers.html。
  5. 如果系統詢問副檔名，請選擇 Use .html。

這些是 Apple 說明的在 TextEdit 中建立 HTML 檔案步驟。此範例不需要套件、指令碼或外部素材。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample tile dimensions</title>
  <style>
    table { border-collapse: collapse; }
    th, td { border: 1px solid #777; padding: 0.5rem; }
    caption { text-align: left; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Sample tile dimensions</h1>
  <table>
    <caption>Illustrative tile dimensions in millimetres</caption>
    <thead>
      <tr>
        <th scope="col">Set</th>
        <th scope="col">Variant</th>
        <th id="tiles-width" scope="col">Width</th>
        <th id="tiles-height" scope="col">Height</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th id="tiles-alpha" rowspan="2" scope="rowgroup">Alpha</th>
        <th id="tiles-alpha-small" scope="row">Small</th>
        <td headers="tiles-alpha tiles-alpha-small tiles-width">20</td>
        <td headers="tiles-alpha tiles-alpha-small tiles-height">30</td>
      </tr>
      <tr>
        <th id="tiles-alpha-large" scope="row">Large</th>
        <td headers="tiles-alpha tiles-alpha-large tiles-width">40</td>
        <td headers="tiles-alpha tiles-alpha-large tiles-height">60</td>
      </tr>
    </tbody>
    <tbody>
      <tr>
        <th id="tiles-beta" rowspan="2" scope="rowgroup">Beta</th>
        <th id="tiles-beta-small" scope="row">Small</th>
        <td headers="tiles-beta tiles-beta-small tiles-width">25</td>
        <td headers="tiles-beta tiles-beta-small tiles-height">35</td>
      </tr>
      <tr>
        <th id="tiles-beta-large" scope="row">Large</th>
        <td headers="tiles-beta tiles-beta-large tiles-width">45</td>
        <td headers="tiles-beta tiles-beta-large tiles-height">65</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

若要預覽結果，請在 Safari 中開啟已儲存的檔案。您應該會看到四個欄，Alpha 和 Beta 各占兩個資料列。請讓檔案保持在 TextEdit 中開啟，以便進行下方的原始碼檢查。

在 TextEdit 中重新開啟文件時，請使用 File > Open，選取檔案，按一下 Show Options，然後選取 Ignore rich text commands。或者，在 TextEdit > Settings 的 Open and Save 下方啟用 Display HTML files as HTML code instead of formatted text。Apple 在其 HTML 編輯說明中記載了這些選項。

範例如何將各值與其標頭連結？

將數值 40 的原始碼視為一份簡單的關聯對照表。其 headers 清單包含 tiles-alpha、tiles-alpha-large 和 tiles-width。這些 ID 分別代表 Alpha、大型和寬度。相應的高度值 60 會保留前兩個 ID，並以 tiles-height 取代第三個。

這些 ID 是作者自行選定的識別碼，不是特殊的 HTML 關鍵字。每個列出的代碼都必須指向同一個表格中的 th 元素。代碼之間以空格分隔，而且同一份清單中不可重複代碼。這些要求出自 HTML 標準的通用表格儲存格屬性。

這份清單會明確列出完整脈絡，而不會要求讀者透過另一個標頭自行推斷。W3C 的 H43 技術說明，應將適用的標頭 ID 放入每個資料儲存格的 headers 屬性中。

請注意，Alpha 的第二列以 Large 開頭。該列不會為 Alpha 多加一個儲存格：第一列的 rowspan="2" 已經占據該位置。在那裡加入空白儲存格會改變表格格線。MDN 在其標頭儲存格使用注意事項中說明，儲存格會填入跨列或跨欄儲存格留下的可用位置。

使用相同的思路來區分兩種乍看相似的版面。左側標籤若跨越多個資料列，可以是列群組標頭。頂端跨越兩列的欄標籤仍可使用 scope="col" 作為欄標頭；它的實際高度不會使其關係變成列群組關係。MDN：標頭屬性。

修改表格前先檢查關聯

在此範例中，請針對三個標籤進行稽核。選取一個值，確認其預期的組別、變體和尺寸，然後將這些標籤與參照的 ID 比較。

值 預期脈絡 預期的 headers 值
20 Alpha、小型、寬度 tiles-alpha tiles-alpha-small tiles-width
60 Alpha、大型、高度 tiles-alpha tiles-alpha-large tiles-height
25 Beta、小型、寬度 tiles-beta tiles-beta-small tiles-width
65 Beta、大型、高度 tiles-beta tiles-beta-large tiles-height

對每個數值儲存格重複此檢查。確認每個參照的 ID 都存在、每個參照都指向預期的標頭，而且文件中沒有重複的 ID。這些檢查遵循 W3C 的 H43 技術所述的程序。表格外觀整齊只是檢查的一部分；也要檢查原始碼中的關聯。

新增第三個 Alpha 變體時，請將其列插入 Alpha 現有的 tbody 中，將 Alpha 的跨列數改為 rowspan="3"，為新變體指定唯一 ID，並在每個新增的數值儲存格中加入適當的三標頭清單。進行修改時，請保留原有的列順序和值。

刪除變體時，請相應地減少跨列數。如果刪除群組的第一列，請將群組標頭移到剩餘列中的第一列。跨列儲存格必須保留在單一列群組內：HTML 表格模型不允許儲存格跨越多個列群組。WHATWG：表格模型。

如果應用程式之後會產生或重新排序資料列，請將以下內容視為更新要求：讓每個群組保持在一起、將其跨列標頭放在第一列、維持跨列數，並更新任何變動的參照。以此範例來說，若將 Alpha 中的 Large 移到 Small 前面，也必須將 Alpha 標頭移到新的第一列。

如果編輯器無法保留這些屬性，該怎麼辦？

編輯器能合併儲存格，不代表它也會保留此處使用的關聯。在依賴編輯後或匯出的文件前，請檢查其 HTML 是否包含預期的群組邊界、scope、ID 和標頭清單。本教學支援的 Mac 工作流程是在 TextEdit 中直接編輯原始碼。

如果您的製作工具無法保留必要的結構，可以考慮為每個組別建立獨立且較簡單的表格，欄位設為 Variant、Width 和 Height。W3C 提出將複雜表格拆成較小表格作為替代方案，這有助於閱讀和編寫。只有在可以接受變更原始結構時，才使用這個選項。W3C：拆分多層級表格。

範例完成後，任選一個數值，確認它參照的三個標籤確切描述了該數值所測量的內容。之後每次插入、刪除或重新排序資料列時，都以相同方式檢查。這能讓您具體確認表格的意義和外觀都維持完整。

來源