标准答案
- table 应用于真正的表格数据,不应该拿来做页面布局。
- caption 可以描述表格主题,thead 放表头行,tbody 放主体数据行。
- th 表示表头单元格,scope 可以说明它作用于行还是列。
- td 表示普通数据单元格,tr 表示一行。
- 复杂表格要注意表头关联、排序状态、移动端横向滚动和键盘可访问性。
题目解析
这题重点是表格语义。视觉上像表格的数据,最好用 table 结构表达。
th 和 scope 能让辅助技术知道数据单元格对应哪个表头。
代码示例
scope="col" 表示这个 th 是列标题。
HTML
<table>
<caption>订单列表</caption>
<thead>
<tr>
<th scope="col">订单号</th>
<th scope="col">金额</th>
</tr>
</thead>
<tbody>
<tr>
<td>A001</td>
<td>128.00</td>
</tr>
</tbody>
</table>常见误区
- 用 table 做布局,导致语义和响应式都难维护。
- 所有单元格都写 td,不使用 th 表达表头。
- 复杂表格没有 caption、scope 或可访问排序状态。