1. HTML 表格结构的核心概念
HTML 表格结构由 <thead>、<tbody>、<tfoot> 三部分组成，用来分离表头、数据区和表尾。这样的语义分离有助于浏览器渲染、屏幕阅读器解析和样式控制。
正确理解 thead、tbody、tfoot 的用途可以提高表格的可访问性和可维护性，尤其在大表格场景中。
1.1 thead、tbody、tfoot 的角色定位
在页面中，thead承载表头行，tbody承载主体数据行，tfoot在表格底部提供汇总或说明性信息。通过分区，辅助技术可以快速定位信息。
在样式层，使用这些分区也便于对滚动、对齐和列宽进行独立控制。
<table><thead><tr><th>产品</th><th>价格</th><th>库存</th></tr></thead><tbody><tr><td>智能灯泡</td><td>$9.99</td><td>120</td></tr><tr><td>智能插座</td><td>$12.49</td><td>75</td></tr></tbody><tfoot><tr><td>合计</td><td></td><td>195</td></tr></tfoot>
</table>2. thead 的语义与使用场景
为表头提供语义标签，使协助技术可以读取列名并与数据对齐。thead 的存在让样式和数据分离更明显。
在大表格中，使用 thead 和 th 共同定义每列的含义，确保排序和筛选的可访问性。
2.1 正确使用 thead 组织表头
将表头（甚至跨多列的合并头）放在 thead 中，避免将表头放在 <tbody>，以免混淆读屏软件。
如果表头需要跨列，可以使用 colspan 来实现，保持每列的语义清晰。
<table><thead><tr><th rowspan="2">区域</th><th colspan="2">销售</th></tr><tr><th>本月</th><th>累计</th></tr></thead><tbody><tr><td>北区</td><td>120</td><td>1320</td></tr></tbody><tfoot><tr><td>总计</td><td></td><td>1320</td></tr></tfoot>
</table>3. tbody 的组织与可访问性要点
tbody 用于实际数据行的容器，帮助浏览器和辅助技术区分数据与头部与尾部。
对于大量数据，使用 tbody 可以分段渲染，提升性能和可维护性。
3.1 将数据主体分组到 tbody 的最佳实践
当表格中有多类数据或多页数据时，分多个 tbody（如不同区域）有助于排序与滚动逻辑的实现。
下面示例展示了如何在同一个表中使用多组主体：
<table><thead>...</thead><tbody><tr><td>条目A1</td><td>…</td></tr><tr><td>条目A2</td><td>…</td></tr></tbody><tbody><tr><td>条目B1</td><td>…</td></tr></tbody><tfoot>...</tfoot>
</table>4. tfoot 的用途与辅助信息
tfoot用于提供表格的汇总、统计或注释信息，确保在屏幕阅读器中即使在长表格也能快速访问到总结内容。
根据信息架构，tfoot 应放在表格底部，尽管在视觉呈现中可能固定在底部，语义上仍然是尾部信息。
4.1 tfoot 提供的统计与汇总信息的可访问性
通过将汇总放在 tfoot，屏幕阅读器可以在用户滚动表格时保持定位，避免重复解析表体数据。
示例中，tfoot 可以包含总计、平均值或说明性文本，提升可访问性和可理解性。
