如何在`<th>`元素上使用`headers`属性？

Question

我看到

<th>

元素接受

headers

属性。但我从未见过如何使用它的示例。我知道如何在

<td>

元素上使用它，但不知道如何在

<th>

元素上使用。

如果我有一个表，其中某些行是其他行的“子行”，我相信将这些子行的单元格与正确标题关联的典型方法是在所有子行的

headers 上使用 

<td>

 属性

细胞。

<table>
    <thead>
        <tr>
            <th scope="col">Property</th>
            <th scope="col" id="occupiedColHeader">Occupied</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" id="prop1RowHeader" class="parent-row">Apartment complex</th>
            <td>Partly</td>
        </tr>
        <tr>
            <th scope="row" id="unit1RowHeader" class="child-row">Unit 1</th>
            <td headers="prop1RowHeader unit1RowHeader occupiedColHeader">Yes</td>
        </tr>
    </tbody>
</table>

我可以像这样在子行的行标题上使用

headers

吗？

<table>
    <thead>
        <tr>
            <th scope="col" id="propertyColHeader">Property</th>
            <th scope="col">Occupied</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" id="prop1RowHeader" class="parent-row">Apartment complex</th>
            <td>Partly</td>
        </tr>
        <tr>
            <th scope="row" headers="prop1RowHeader propertyColHeader" class="child-row">Unit 1</th>
            <td>Yes</td>
        </tr>
    </tbody>
</table>

在只有两列的表格上，差异很小。不过，桌子越大，后一个选项如果有效的话就越方便。

Answer 1

从技术上讲，是一个表格单元格，并且可以使用

headings

属性来标记表格单元格，但我刚刚使用JAWS和NVDA对其进行了测试，但它似乎并未得到认可。在

 上使用 

headings 效果很好，但在您的情况下不需要。

对于列或行上的典型标题，其中列标题位于顶部，行标题位于左边缘，即使有多个级别的列标题和行标题，也使用 和 （以及

colspan

和

rowspan

（如果适用）就是您所需要的。无需向

 元素添加 

headings。

我理解您正在尝试实现的概念。有点间接标题。也就是说，如果您可以使用 headings

 让其他表格单元格标记 

，那么使用该 作为标题的单元格也将由其他单元格标记。但这不起作用。

W3C 有一些很好的行和列上的多级标题示例，这些示例不使用

headings

属性，而另一个示例则在不同的行上有多个标题，必须使用

headings

属性。

我不知道为什么，但 W3C 称第一个示例为“不规则”标头，即使标头是规则的，只是具有多个级别。

然后第二个示例在不同行上有多个标题，我称之为“不规则”，他们称之为“多级”。

我认为他们的标签是倒退的。

无论如何，他们在这里：

• https://www.w3.org/WAI/tutorials/tables/irregular/
• https://www.w3.org/WAI/tutorials/tables/multi-level/