表格的正确用法

table 表达二维数据关系：行与列的交叉点有一个可解释的值。它适合价格、成绩、库存和统计结果，不适合拿来做页面布局。表格的可访问性依赖表头与数据单元之间的关联，不能只看边框和对齐方式。

<table>
  <caption>本周库存</caption>
  <thead>
    <tr><th scope="col">商品</th><th scope="col">数量</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">键盘</th><td>12</td></tr>
    <tr><th scope="row">鼠标</th><td>8</td></tr>
  </tbody>
</table>

caption 给表格身份，th 表达表头，scope 帮助浏览器建立行或列的关系。复杂的多层表头需要 id 与 headers 精确关联；不能靠视觉位置猜测。thead、tbody 和 tfoot 是结构分组，不是强制的视觉布局区域。

把 table 用在卡片、导航或三列页面布局中，会把视觉网格错误地暴露成数据关系；Flexbox 和 Grid 才是布局工具。反过来，把真正的财务数据写成一串 div，又会丢失行列导航。

实验与练习

创建一张包含列标题、行标题、合计行和 caption 的库存表。用开发者工具检查表头关联，再把它改成 div 网格，比较可访问性树。至少说明一个视觉相同但语义不同的结果。

常见错误

• 用表格排页面布局。
• 用 td 代替所有表头。
• 有复杂表头却没有可计算的关联。
• 只设置边框，不提供 caption 或可理解的标题。

继续阅读

下一篇进入用户输入：表单结构与控件。

练习

1. 用最小输入复现“表格的正确用法”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案