HTML 表格¶
表格用于表达具有行列关系的二维数据，不用于页面布局。清楚的标题、表头关联和简单结构， 能帮助视觉用户与辅助技术理解同一组数据。
学习目标¶
- 使用
table、caption、tr、th和td构建数据表。 - 为简单表格建立明确的行列标题关系。
- 处理窄屏显示并避免表格布局误用。
核心概念¶
<table>
<caption>教程完成情况</caption>
<thead>
<tr>
<th scope="col">主题</th>
<th scope="col">状态</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">链接</th>
<td>已完成</td>
</tr>
<tr>
<th scope="row">图片</th>
<td>学习中</td>
</tr>
</tbody>
</table>
caption 是表格的可见标题。tr 表示一行，th 表示表头单元格，td 表示数据单元格。
scope="col" 和 scope="row" 可明确简单表格中表头作用的方向。
结构分组¶
thead、tbody 和 tfoot 分别组织表头、主体和汇总区域，便于理解、样式设置和脚本处理。
不要只为获得粗体而使用 th；它必须确实是相关数据的标题。
复杂的跨行跨列表格可能需要 id 与 headers 建立显式关联，但在采用复杂结构前，
先考虑能否拆成多个简单表格。简单结构通常更适合窄屏和辅助技术。
响应式与数据完整性¶
表格过宽时可让外层容器水平滚动，并保留可见的滚动提示。不要在小屏上直接隐藏关键列， 除非提供等价访问方式。数值的单位、精度和缺失状态应在标题或正文中解释。
从外部数据生成单元格时应按文本上下文安全输出。若提供 CSV 导出，还要注意电子表格公式注入， 不能假设 HTML 转义同时适用于其他文件格式。
常见错误¶
- 使用表格排列整页导航、图片或表单布局。
- 省略
caption，只在表格外留下含糊说明。 - 所有单元格都使用
td，没有可关联的表头。 - 依赖颜色区分状态，却没有文字或符号说明。
- 为适配手机删除关键数据，导致信息不完整。