HTML DOM TableHeader headers 属性

HTML DOM TableHeader 对象的 headers 属性返回一个包含表头单元格域 ID 的字符串。它通常用于为表格单元格定义头部，使得屏幕阅读器能正确读取表格内容。

语法

document.getElementsByTagName("TH")[0].headers;

返回值

如果没有头部单元格域，该属性返回空字符串。如果有，该属性返回一个包含表头单元格域 ID 的字符串，多个 ID 以空格分隔。

示例

<table>
  <thead>
    <tr>
      <th id="name" headers="name fname lname">Name</th>
      <th id="age">Age</th>
      <th id="job">Job</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="name">John</td>
      <td headers="age">28</td>
      <td headers="job">Developer</td>
    </tr>
    <tr>
      <td headers="name">Jane</td>
      <td headers="age">24</td>
      <td headers="job">Designer</td>
    </tr>
  </tbody>
</table>

在上面的代码中，第一个表头单元格域具有三个 ID，分别为 name、fname 和 lname。第二个表头单元格域只有一个 ID，即 age。第三个表头单元格域只有一个 ID，即 job。在两个数据行中，每个单元格使用 headers 属性指定其所在的表头单元格域。

这样，当屏幕阅读器处理这个表格时，它可以使用 headers 属性来确定表头单元格域的关系，并正确地朗读表格内容，从而更好地提升网站的可访问性。