用于在表格中分组标题的HTML5标记是什么？

Question

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

目前，我这样称呼他们：

目前，这两个群组标题（＆＃34; Baseline＆＃34;以及＆＃34; Performer＆＃34;）只是一个额外的<TR>，其内容为<TD>。这让我觉得很脏。

我想在顶部删除<thead>，并将标题合并到每个组标题中。我知道我在表格中不能有多个<thead>元素，并且没有<tgroup>这样的内容。

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

我应该使用什么标记：

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

Answer 1

您可以在“类别”列旁边创建“要素组/类型”列，而不是将行拆分为多个部分。

已编辑添加

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

如果您的第一个单元格是th，请为其指定scope =“row”，以区别于其他元素。例如

<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

Answer 2

我知道你不想将它们分成多个表，但是在恕我直言中会使这种结构变得非常容易。您可以将所有组标题放在同一个aria-level，然后在每个组中，您可以拥有一个包含列标题的正确表。 要提供搜索，排序等选项，您需要有一个操作栏，其中包含相同或更低aria-level的每个操作的正确描述。您还可以使每个组成为容器中的列表项（从可访问性工具的角度来看）。