HTML 表格

用 table 表达二维数据关系，配置表头 scope 与 caption，避免用表格做视觉布局。

#concept #growing #frontend #html

[!info] related notes

所属：文档与语义 MOC

相关：可访问性 · CSS Grid

HTML 表格

这个概念为什么出现

低库存列表是真正的二维数据：行是 SKU，列是指标。用 div 假装表格，读屏无法建立“当前单元格对应哪列表头”；用 table 画整站布局，则语义与响应式双输。

[!abstract] 一句话理解 table 表达数据关系；页面布局交给 CSS。

最小可运行示例

场景：低库存 SKU 表

<table>
  <caption>A 仓低库存 SKU（低于安全库存）</caption>
  <thead>
    <tr>
      <th scope="col">SKU</th>
      <th scope="col">品名</th>
      <th scope="col">剩余</th>
      <th scope="col">安全库存</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A-01</th>
      <td>蓝色缠绕膜</td>
      <td>3</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">A-09</th>
      <td>防潮纸板</td>
      <td>5</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

期望：读屏在单元格间移动时可听到表头上下文；caption 提供表的标题。

核心模型

caption：表标题
thead/tbody/tfoot：结构分区，本身不替代 th 的表头关联\
th scope=col/row：表头作用域
复杂表可用单元格 headers 属性列出一个或多个 th 的 id，显式说明对应表头；简单表优先 scope。\

边界

复杂响应式表格可能需要卡片化替代布局，但要保留数据可访问策略。
排序可在 th 内放原生 button，并在当前排序列的 th 上维护 aria-sort（ascending/descending）；仅换箭头图标不能表达状态。
虚拟滚动会让未渲染行不在 DOM 中；不能只保留一个 table 外壳就认为读屏可遍历完整数据。\

常见误区

[!warning] 常见误区：用 table 做整页栅格布局这是历史做法；现代布局用 Flex/Grid。

本节总结

表格的价值是表头-单元格关系，不是边框样式。

自测题

scope="row" 用在什么场景？

参考答案

行首是该行的标题性表头时（如 SKU 编码列作为行头）。

延伸阅读

资料	类型	支撑内容
MDN table a11y	教程	高级表与可访问