HTML表头 —— headers
<td>
和<th>
元素定义 headers 属性,可用于使用屏幕阅读器和其他技术更容易地处理表。
headers 属性的值是一个或多个单元的 ID 属性值。
以下代码显示了如何使用此属性。
<!DOCTYPE HTML>
<html>
<head>
<title>HTML 表头(w3cschool.cn)</title>
<style>
thead th,
tfoot th {
text-align: center;
background: #FE6A00;
color: white
}
tbody th {
text-align: center;
background: lightgrey;
color: grey;
}
tbody td {
text-align: center;
}
thead [colspan],
tfoot [colspan] {
text-align: center;
}
#first,
#second {
background: #FAEBD7;
color: #FE6A00;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th id="time">时间</th>
<th id="weather">天气</th>
<th id="temperature">温度/℃</th>
<th id="wind">风向</th>
</tr>
</thead>
<tbody>
<tr>
<th id="first">7月24日</th>
<td headers="weather first">多云</td>
<td headers="temperatire first">26~37</td>
<td headers="wind first">南风</td>
</tr>
<tr>
<th id="second">7月25日</th>
<td headers="weather second">多云</td>
<td headers="temperatire second">26~36</td>
<td headers="wind second">南风</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">© 2020 www.w3cschool.cn 编程狮</th>
</tr>
</tfoot>
</table>
</body>
</html>
尝试一下
全局id
属性被添加到tbody
中的thead
和th元素中的th
个元素。
对于 tbody
中的每个 td
和 th
headers 属性将单元格与列标题相关联。