标准答案

  1. table 应用于真正的表格数据,不应该拿来做页面布局。
  2. caption 可以描述表格主题,thead 放表头行,tbody 放主体数据行。
  3. th 表示表头单元格,scope 可以说明它作用于行还是列。
  4. td 表示普通数据单元格,tr 表示一行。
  5. 复杂表格要注意表头关联、排序状态、移动端横向滚动和键盘可访问性。

题目解析

这题重点是表格语义。视觉上像表格的数据,最好用 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 或可访问排序状态。

作者信息