要将 HTML 值与跨多行的表头关联，请定义一个行组并使用 scope="rowgroup"。对于更复杂的关系，请为表头设置唯一 ID，并在每个数据单元格的 headers 属性中列出这些 ID。本指南将在 Mac 上使用 TextEdit 创建一个本地示例。

任务是创建一个 HTML 表格，使标签跨越多行时，表格值仍保留其上下文。W3C 在其不规则表格教程中介绍了分组表头，并在其多级表头教程中介绍了显式关联。

表格需要哪种关联方式？

首先写下理解某个值所需的标签。在下面的示例中，数值 40 表示 Alpha 组中 Large 变体的宽度，单位为毫米。因此，它的完整上下文是 Alpha、Large 和 Width。所有尺寸均为示意性样例数据。

编辑前，请参考以下决策指南：

表格结构 使用的关联方式 结构要求
表头标记一个普通行 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、Large 和 Width。对应的高度值 60 保留前两个 ID，并将第三个 ID 替换为 tiles-height。

这些 ID 是作者自行选定的标识符，并非特殊的 HTML 关键字。列表中的每个标记都必须对应同一张表格中的一个 th 元素。标记之间用空格分隔，且同一列表中不能重复。这些要求来自 HTML 标准的表格单元格通用属性。

该列表写明了完整上下文，不要求读者通过另一个表头来推断。W3C 的 H43 技术介绍了如何在每个数据单元格的 headers 属性中填写适用表头的 ID。

请注意，Alpha 的第二行以 Large 开头。该行没有额外的 Alpha 单元格，因为第一行的 rowspan="2" 已占据该位置。在那里添加空单元格会改变网格。MDN 在其表头单元格用法说明中解释了单元格如何填入跨行单元格留下的可用位置。

运用同样的思路，可以区分两种表面相似的布局。左侧跨越多个主体行的标签可以是行组表头。顶部跨越两行的列标签仍可以是带有 scope="col" 的列标题；它在视觉上占据的高度不会改变其行组关联关系。MDN：表头属性。

修改表格前检查关联

在此示例中，请用三个标签进行审查。选择一个值，确定其对应的组、变体和维度，然后将这些标签与所引用的 ID 进行比较。

值 预期上下文 预期的 headers 值
20 Alpha、Small、Width tiles-alpha tiles-alpha-small tiles-width
60 Alpha、Large、Height tiles-alpha tiles-alpha-large tiles-height
25 Beta、Small、Width tiles-beta tiles-beta-small tiles-width
65 Beta、Large、Height 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：拆分多级表格。

完成示例后，任选一个数值，确认它引用的三个标签准确描述了该值的测量内容。之后每次插入、删除或重新排序行时，都重复同样的检查。这样就能以具体方式保留表格的含义和外观。

来源