HTML <td> 标签的 headers 属性 详解
HTML基础 2022-06-02 12:08:04小码哥的IT人生shichen
HTML <td> 标签的 headers 属性
实例
下面的例子显示表头与每个单元相关联：
<table border="1" width="100%">
<tr>
<th id="name">Name</td>
<th id="Email">Email</td>
<th id="Phone">Phone</td>
<th id="Address">Address</td>
</tr>
<tr>
<td headers="name">George Bush</td>
<td headers="Email">someone@example.com</td>
<td headers="Phone">+789451236</td>
<td headers="Address">Fifth Avenue New York,USA</td>
</tr>
</table>
完整实例【亲自试一试】：
<html>
<body>
<table border="1" width="100%">
<tr>
<th id="name">Name</td>
<th id="Email">Email</td>
<th id="Phone">Phone</td>
<th id="Address">Address</td>
</tr>
<tr>
<td headers="name">George Bush</td>
<td headers="Email">someone@example.com</td>
<td headers="Phone">+789451236</td>
<td headers="Address">Fifth Avenue New York,USA</td>
</tr>
</table>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
headers 属性规定表头与单元格相关联。
headers 属性不会在普通浏览器中产生任何视觉变化。
屏幕阅读器可以利用该属性。
详细解释
headers 属性会将表格中的一个表头单元格和一个数据单元格联系起来。
这个属性的值是引号包括的一列名称，这些名称是用 id 属性定义的不同表头单元格的名称。
headers 属性对非可视化的浏览器，也就是那些在显示出相关数据单元格内容之前就显示表头单元格内容的浏览器非常有用。
浏览器支持
由于不会在普通浏览器中产生任何视觉效果，很难判断浏览器是否支持 headers 属性。
语法
<td headers="value">
属性值
| 值 | 描述 |
|---|---|
| idrefs | 规定与表格单元相关联的一个或多个表头单元的 id。 |
