HTML5中、和是语义化表格的核心结构元素，分别定义表头、主体和页脚区域，提升可访问性、CSS控制力与打印支持。
HTML5 中的 <thead>、<code><tbody> 和 <code><tfoot> 是语义化表格结构的关键元素，它们不只是“好看”或“可有可无”的标签，而是让表格更易维护、更利于无障碍访问、更适配打印与 CSS 控制的核心分层机制。
<h3>明确划分表格逻辑区域</h3>
<p>一个标准表格应按内容职责划分为三部分：</p>
<ul><li><strong><thead>：仅包含表头行（<code><tr>），通常用 <code><th> 定义列名，代表“这是什么数据”；
<li><strong><tbody>：承载主体数据行，每行用 <code><tr> 包裹，单元格多为 <code><td>，是表格最核心、可能动态增删的部分；
<li><strong><tfoot>：放在 <code><tbody> 之前（注意：不是之后！HTML 规范允许且推荐先写 <code><tfoot>，浏览器会自动渲染到底部），适合放汇总、统计、页脚说明等。
<p>这种顺序写法（<code><thead> → <code><tfoot> → <code><tbody>）能让浏览器在 <code><tbody> 数据量极大时，优先渲染头部和页脚，提升感知性能。
<h3>CSS 样式与滚动控制更精准</h3>
<p>分离结构后，CSS 可独立控制各区域行为：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>给 <code><thead> 设置 <code>position: sticky; top: 0;，实现表头固定滚动；
<tbody> 设置固定高度 + <code>overflow-y: auto，让主体内容独立滚动；
<tfoot> 配合 <code>border-top 或背景色，视觉上自然区分汇总行，避免和数据行混淆。
若不加这些标签，所有 <tr> 平级，CSS 就只能靠 nth-child 等脆弱方式模拟，既难读又易出错。
<h3>辅助技术与打印更友好</h3>
<p>屏幕阅读器会识别 <code><thead> 内容，在读每一行数据前自动重复表头信息（如“姓名：张三，年龄：28”），大幅提升可访问性。打印时，多数浏览器默认在每页顶部重复 <code><thead>，并在页尾显示 <code><tfoot>（如果存在），无需额外 JS 或分页逻辑。
<h3>实际书写注意事项</h3>
<p>几个容易被忽略但关键的细节：</p>
<ul><li><code><thead>、<code><tfoot>、<code><tbody> 必须是 <code><table> 的直接子元素，不能嵌套在其他标签里；
<li>每个区域内部必须至少包含一个 <code><tr>，空 <code><thead> 会导致 HTML 验证失败；
<li>列数需严格一致——<code><thead> 有 4 个 <code><th>，所有 <code><tbody> 中的 <code><tr> 也应有且仅有 4 个 <code><td>（或含 <code>colspan/rowspan 的合理合并）；
<tfoot> 虽然语义是“页脚”，但它在 DOM 中的位置写在 <code><tbody> 前更稳妥，否则某些旧版浏览器可能解析异常。
<p>不复杂但容易忽略——把这三层写对，表格就从“能显示”升级为“好维护、好访问、好扩展”。</p>
</tbody>
