正确使用table标签表达二维数据关系，配合thead、tbody、th、caption等语义元素，并通过ARIA增强可访问性；避免用table布局，改用CSS Flexbox、Grid和语义化标签；复杂表格需建立表头关联，减少合并单元格；非二维数据优先选择dl、article等替代方案。
HTML表格的语义化核心在于：用正确的结构表达数据关系，避免滥用table做布局，并在必要时结合ARIA提升可访问性。现代开发中，也应考虑使用更语义化的替代方案来展示数据。
正确使用table标签表达数据关系
当内容是二维数据（如成绩表、时间表）时，table 是最合适的语义化标签。关键在于使用配套的语义元素：
- thead 包裹表头行，明确列的含义
- tbody 包含主体数据，逻辑清晰
- tfoot 可用于合计或统计行
- th 用于表头单元格，配合 scope 属性指明作用范围（row 或 col）
- caption 提供表格标题，替代title属性，对屏幕阅读器友好
示例：
<table>
<caption>2024年销售数据</caption>
<thead>
<tr>
<th scope="col">月份</th>
<th scope="col">销售额（万元）</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1月</th>
<td>120</td>
</tr>
</tbody>
</table>
避免用table做页面布局
过去常用table控制页面排版，但这破坏了语义结构，影响SEO和辅助技术识别。现代开发应使用：
立即学习“前端免费学习笔记（深入）”；
- CSS Flexbox 实现一维布局（如导航栏、卡片排列）
- CSS Grid 实现二维网格布局，灵活性远超table
- 语义化块级标签如 header、main、section、aside 明确区域功能
这些方式不仅结构清晰，还支持响应式设计，维护成本更低。
复杂表格的可访问性增强
对于跨行跨列的复杂表格，仅靠视觉难以理解。可通过以下方式提升语义表达：
- 使用 id 和 headers 属性建立单元格与表头的关联
- 为屏幕阅读器添加隐藏说明，如通过 aria-describedby 指向描述性文本
- 避免过度合并单元格（rowspan/colspan），保持结构简洁
确保视力障碍用户也能准确理解数据关系。
语义化替代方案：何时不用table
并非所有“看起来像表格”的内容都该用table。考虑以下情况：
- 纯展示型数据列表（如产品参数）可用 dl（定义列表）
- 卡片式信息组适合用 article + CSS Grid 排列
- 需要排序、筛选的动态数据，推荐使用基于语义标签封装的数据组件（如自定义元素或框架组件）
关键是根据数据本质选择结构，而非视觉呈现。
基本上就这些。table本身是语义化标签，问题常出在误用。只要数据是真正的二维关系，合理搭配 thead、th、caption 等，就是合规且可访问的写法。布局交给CSS，结构留给语义标签，才是现代HTML的正确实践。
