html - 用于在表格中对标题进行分组的 HTML5 标记是什么？

Question

我有一个表格，其中的数据行按类别分组。

目前我将它们设计成这样:

目前这两个组标题(“基线”和“执行者”)只是一个额外的 <TR>与跨越<TD> .这让我觉得很脏。

我想摆脱那个<thead>在最顶部，并将标题合并到每个组标题中。我知道我不能有多个 <thead>表中的元素，并且没有 <tgroup> 这样的东西.

我不想将表格分成多个表格，因为有不同的方法可以对完整的数据集进行排序(例如，表格可以按类别分组)。

我应该使用什么标记:

1. 隐藏/处理/删除最顶层的表头
2. 将相关标题插入每个组标题
3. 仍然可以访问吗？

Answer 1

您可以将功能组/类型设置为类别列旁边的一列，而不是将行分成多个部分。

编辑添加

在那种情况下，我会将跨列行设为 th 而不是 td。给它一个 id 属性，如 id="baseline"，并为列标题也提供一个 id。然后对于内容行，给第一个单元格一个 headers 属性，它引用那些 id。这是有效的，但屏幕阅读器对 header /id 关联的支持有点不一致，因此您可能需要进行一些测试并对其进行调整才能获得不错的结果。通常 scope=row/col 就足够了，但是 headers/id 是为你拥有的多个标题而设计的。

如果您的第一个单元格是 th，给它一个 scope="row"只是为了将它与其他 th 元素区分开来。例如

<thead>
  <tr><th id="feature">Feature</th><th>Category</th><th>B</th><th>P</th></tr>
</thead>
<tbody>
  <tr><th id="baseline" col-span="4">Baseline</th></tr>
  <tr><th scope="row" headers="baseline feature">Account activity</th><td>Accounts</td><td>59%</td><td>34%</td></tr>
 ...
</tbody>

你可以在这里看到更详细的解释:http://webaim.org/techniques/tables/data