表头与分区
thead/tbody/tfoot 分区、scope 属性、多级表头
表格表头与结构
用 <thead>、<tbody>、<tfoot> 把表格分成语义区域——浏览器可以独立滚动 body 而固定表头。
学完本章你将： 掌握 thead/tbody/tfoot、scope 属性、多级表头。
分区结构
html
<table border="1">
<thead>
<tr>
<th>月份</th>
<th>收入</th>
<th>支出</th>
</tr>
</thead>
<tbody>
<tr>
<td>1月</td>
<td>¥10,000</td>
<td>¥6,000</td>
</tr>
<tr>
<td>2月</td>
<td>¥12,000</td>
<td>¥7,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>合计</strong></td>
<td><strong>¥22,000</strong></td>
<td><strong>¥13,000</strong></td>
</tr>
</tfoot>
</table>scope 属性
html
<th scope="col">姓名</th> <!-- 表头作用于列 -->
<th scope="row">小明</th> <!-- 表头作用于行 -->💡
scope帮助屏幕阅读器理解表格结构，提升可访问性。
多级表头
html
<table border="1">
<tr>
<th colspan="2">2024年</th>
</tr>
<tr>
<th>上半年</th>
<th>下半年</th>
</tr>
<tr>
<td>50万</td>
<td>80万</td>
</tr>
</table>