必须按 thead → tfoot → tbody 顺序编写表格 DOM，否则影响 sticky 表头、打印分页、JS 获取 tFoot、屏幕阅读器语义；thead 只能含 <tr> 和 <th>，需 scope="col"；tfoot 唯一，多 tbody 合法但不可配多个 tfoot。
必须按 thead → tfoot → tbody 顺序写 DOM
浏览器解析表格时，依赖这个顺序提前渲染表头和页脚。哪怕 tfoot 语义上是“脚”，也得写在 tbody 前面。否则：
- 某些旧版 Safari 或 IE 可能忽略
thead的position: sticky行为 - 打印时每页无法自动重复
tfoot和thead - JS 读取
table.tFoot返回的节点位置可能与 DOM 树不一致 - 屏幕阅读器可能把汇总行误读成数据行
正确的结构只能是：
<table> <caption>销售数据汇总</caption> <thead><tr><th>产品</th><th>销量</th></tr></thead> <tfoot><tr><td>总计</td><td>1247</td></tr></tfoot> <tbody><tr><td>A款</td><td>321</td></tr></tbody> </table>
thead 里只能放 <tr>，且单元格必须用 <th>
thead 不是“第一行数据容器”，而是列定义区。它的作用是告诉浏览器“这一列叫什么、代表什么”。所以：
- 不能往
thead里塞<td>，否则语义断裂，屏幕阅读器不会把它当标题读 - 每个
<th>应加scope="col"（列范围）明确作用域 -
thead必须至少包含一个<tr>，空thead会导致 HTML 验证失败 - 如果有跨列表头（如“Q1–Q3 销售”），要用
colspan，但列总数仍需和tbody中每行的单元格数对齐
多个 tbody 是合法的，但 tfoot 只能有一个
分组表格（比如按月份/区域拆分数据块）可以用多个 tbody，每个对应一组逻辑数据：
立即学习“前端免费学习笔记（深入）”；
<tbody class="group-q1">...</tbody> <tbody class="group-q2">...</tbody>
但注意：
-
tfoot仍是整个<table>的页脚，不是每个tbody独立配一个 - 浏览器只认第一个
tfoot，后续的会被忽略或解析异常 - 若需要每组内部带小计，得用
<tr class="subtotal">放在对应tbody内部，而不是靠多个tfoot
CSS 控制滚动和打印时，分区失效的常见原因
固定表头、独立滚动主体、分页重复表头这些能力，全依赖三层标签存在且结构正确：
- 给
tbody设了max-height+overflow-y: auto，但没给table设display: block，滚动会失效 -
thead加了position: sticky; top: 0，但父级table没设border-collapse: collapse，可能导致粘性错位 - 打印预览看不到每页重复的
thead，大概率是它没写在tfoot前面，或者漏了caption（部分浏览器要求 caption 存在才启用智能分页） - 列宽不一致：比如
thead用colspan="2"合并两列，但某个tbody行只写了 1 个<td>，浏览器会自动补空单元格，但 CSS 宽度计算就乱了
真正卡住人的往往不是语法，而是 DOM 顺序、列数对齐、以及 caption 这个被很多人跳过的强制前置元素。
