HTML <th> headers 属性

在 HTML 表格中，<th> 元素用于定义表格的表头单元格。<th> 元素通常用于第一行或第一列，用于标识表格中的标题或重要信息。除了常见的 scope 和 colspan、rowspan 属性外，<th> 元素还有一个非常有用的属性——headers。

什么是 <th> headers 属性？

headers 属性用于指定一个或多个与当前表头单元格相关联的表头单元格。通过关联其他表头单元格，可以让屏幕阅读器更好地理解表格的结构，从而提高可访问性。

如何使用 <th> headers 属性？

要使用 headers 属性，首先需要为每个表头单元格指定一个唯一的 id 属性。然后，在需要关联其他表头单元格的 <th> 元素中，使用 headers 属性指定相关联的表头单元格的 id 值，多个值之间用空格分隔。

示例代码如下：

// www.javascriptcn.com code example
<table>
  <tr>
    <th id="header1">Name</th>
    <th id="header2">Age</th>
    <th id="header3">Country</th>
  </tr>
  <tr>
    <td headers="header1">Alice</td>
    <td headers="header2">25</td>
    <td headers="header3">USA</td>
  </tr>
</table>

在上面的示例中，每个表头单元格都有一个唯一的 id 属性，然后在数据单元格中使用 headers 属性指定与之相关联的表头单元格。

注意事项

• headers 属性的值应该是空格分隔的一个或多个表头单元格的 id 值。
• 使用 headers 属性时，应确保相关联的表头单元格具有语义上的相关性，以提高可访问性。
• 尽量避免过度使用 headers 属性，以免使表格结构过于复杂。

通过合理使用 <th> headers 属性，可以让 HTML 表格更具可访问性和语义性，提升用户体验。希望本文能帮助你更好地理解和应用这一属性。