如何在<th>元素上使用headers属性？嵌套行场景可行性探讨

我发现<th>元素支持headers属性，但从未见过它的使用示例。我知道如何在<td>元素上使用该属性，却不清楚<th>元素的用法。

对于包含子行的表格，常规做法是在子行的<td>单元格上使用headers属性关联对应表头，示例如下：

<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>

那我是否可以改为在子行的行表头<th>上使用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>

在仅两列的表格中两种方式差异不大，但如果可行，后者在大表格中会更便捷。

解答： #

当然可以在<th>元素上使用headers属性，这完全符合HTML规范。HTML标准中headers属性的适用对象包含<th>和<td>，作用是通过指定关联表头的id，明确单元格与表头的从属关系，提升表格的可访问性。

你给出的第二种写法是合理且推荐的：子行的<th>通过headers同时关联父行的行表头和所属列的列表头，能让辅助技术（如屏幕阅读器）清晰识别“Unit 1”是“Apartment complex”的子项，且属于“Property”列的内容。

在复杂的多层级表格中，这种写法的优势尤为明显——无需在每个<td>单元格中重复填写多个父级表头的id，只需在行表头<th>上统一关联父级，后续同属该行的<td>只需关联这个行表头和对应列表头即可，大幅简化代码，提升可维护性。

内容的提问来源于stack exchange，提问作者tvanc