免费AI编程助手
HTML 表头
2020-07-24 13:45 更新
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 属性将单元格与列标题相关联。
以上内容是否对您有帮助：
← HTML 表格
更多建议：