td 与 th 的区别与使用场景：从语义化到可访问性的前端表格实战指南

01 语义化在前端表格中的核心作用

01-td 与 th 的角色定位

在前端表格中，td 用于承载数据单元格，而 th 则用于表头单元格。通过区分这两者，屏幕阅读器和搜索引擎可以更准确地理解表格的结构和含义，提升可访问性与语义清晰度。

此外，th 自动带有可识别的语义标签，便于实现列和行的上下文关系；而 td 则承载具体数据，不应混用。对于复杂表格，使用 thead、tbody、tfoot 可以进一步分组和标注信息。

实践要点是使用 scope 属性为 th 指定其作用范围，例如 scope="col" 表示列头，scope="row" 表示行头。这样的标记提升了可访问性和可维护性。

tableNameAgeCityAlice30New York

该示例演示了 thead、tbody、th 与 td 如何协同工作，确保结构在可访问性上的一致性，并向搜索引擎传达明确的语义信息。

01-使用场景：何时使用 td / th

数据列通常使用 td，而作为列或行的标题使用 th，确保信息层级清晰。对于需要标注行头的场景，应该使用 th scope="row"，这会为屏幕阅读器提供行头的上下文。

如果表格中包含多列的标题信息，或者行头跨越多列时，可以使用 headers 属性将 与对应的 头部单元关联起来，以支持复杂表格结构。

在语义化程度较高的场景中，优先使用 thead、tbody、tfoot，并搭配 scope，这样可以在不依赖样式的情况下保持可访问性。

02 提升可访问性的表格结构实战

02-表格结构的基本标签

规范的表格结构通常包含 <thead>、<tbody> 和 <tfoot>，它们帮助用户代理按逻辑区分表头、主体和脚注数据，提升导航效率。

表格还可以配合 <caption> 为表格提供文本描述，这对无视觉能力的用户也有帮助，并与辅助技术更好地关联。

城市人口年龄分布
City
Population
Median Age
Beijing
21,000,000
39
Shanghai
24,150,000
38
数据来源：统计局

通过上述结构，thead 的列头信息优先被朗读，随后遍历 tbody，而 tfoot 提供汇总信息，增强了对比与理解的连贯性。

02-使用头部与数据单元的关联

对 td 使用 headers 属性，可以显式关联到一个或多个头部单元格的 ID，这对于复杂表格是必要的。

示例中，Name 列的头部 ID 为 name-col，行头的 ID 为 row-alice，数据单元通过 headers 引用两个头部 ID，明确数据与头部之间的关系。

Name
Age
City
Alice
30
Beijing

03 跨越复杂场景的表格实现技巧

03-多级表头的实现

多级表头通过在 <thead> 中放置多行 <tr>，并对每个 <th> 使用合适的 scope，实现层级描述。此时部分单元格可能在视觉上跨越多列，但语义结构仍然清晰。

建议 使用更具体的列头名称，并利用 colspan 与 rowspan 在 HTML 结构中标注关系，以便辅助技术正确解析。

Name
Measurements
City
Height
Weight
Bob
180cm
75kg
London

03-从语义化到可访问性的渐进实践

在现有简单表格上逐步引入 thead、th、scope，而后再增加 headers 的映射，可以确保系统逐步兼容且易于维护，避免一次性改动带来的可访问性回退。