HTML 教程 / 无障碍表格：caption、scope 与合并单元格

一个可读的数据表应明确其主题，并指出每个数值对应的行和列标题。使用 caption 和 th，必要时添加 scope，并且仅在合并单元格后关系仍然清晰时才合并。

使用 caption 为表格命名

caption 总体描述表格，并且必须是 table 的第一个子元素。它不同于邻近的段落标题，因为它是表格的一部分。如果需要时间段或测量方法来解释数字，请在表格标题或邻近的文本中说明。表格标题引入表格；行和列的各个名称保留在表头单元格中。

通过 scope 将数据与表头关联

列标题使用 scope="col"，行标题使用 scope="row"。在此示例中，与星期一上午对应的值是三个访问者。

<table>
  <caption>按星期与时段统计的访客人数</caption>
  <thead>
    <tr>
      <th scope="col">星期</th>
      <th scope="col">上午</th>
      <th scope="col">下午</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">星期一</th>
      <td>3 位访客</td>
      <td>5 位访客</td>
    </tr>
    <tr>
      <th scope="row">星期二</th>
      <td>4 位访客</td>
      <td>6 位访客</td>
    </tr>
  </tbody>
</table>

scope 说明表头单元格关联的是行、列还是分组；它不是视觉样式规则。在一个简单的表格中，这种关系可能不言而喻，但明确标注可以方便检查意图。 W3C WAI 表格教程 解释了更多模式。

只有在数据需要时才合并单元格

colspan="2" 涵盖两列；rowspan="2" 涵盖两行。以下示例在一个共同的标题下对上午和下午进行分组。colgroup 定义这两列，以便 scope="colgroup" 有一个明确的目标。有关下面的行和单元格，请参见 表格基础知识：table、tr、th 和 td 。

<table>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">星期</th>
    <th scope="colgroup" colspan="2">访客</th>
  </tr>
  <tr>
    <th scope="col">上午</th>
    <th scope="col">下午</th>
  </tr>
  <tr>
    <th scope="row">星期一</th>
    <td>3 位访客</td>
    <td>5 位访客</td>
  </tr>
</table>

结果包含一个用于星期的列组，以及一个包含上午/下午两列的组。第一列也在一个显式的 colgroup 中，因此其结构是可读的，无需依赖省略标签的规则。

不要仅仅为了装饰简单的表格而添加合并的单元格。如果读者必须猜测某个数字属于哪一个表头单元格，请简化表格或将其分成较小的表格。W3C-WAI 关于 不规则表头的指导 提供了更复杂的示例。

测试这些关系

选择任意表格值并问：“这显示的是哪一天和哪个时间段？”在检查答案时，不要仅依赖颜色或位置。在窄屏幕上测试是否有内容被截断，并在复杂的合并表格中尝试使用屏幕阅读器。表格应表示数据，而不是用于布局或输入表单。将表格检查与《无障碍基础：标题、链接、图片和键盘》中手动测试的原则结合起来。