thead必须写在tbody前面，这是浏览器解析逻辑要求：确保流式加载时及时渲染表头、tfoot占位、打印跨页重复及ARIA语义正确；thead内须用th而非td，并设scope="col"定义列关系；固定表头需tbody设高度与overflow，table-layout: fixed对齐列宽；JS操作仅限tbody。
thead 必须写在 tbody 前面，不是习惯，是解析逻辑
浏览器流式加载 HTML 时，看到 thead 就立刻渲染表头，用户不用等几百行数据加载完才看到列名；tfoot 写在 tbody 前还能让浏览器提前占位汇总行，打印时跨页重复表头也依赖这个顺序。如果把 tbody 放最前，旧版 Safari 可能忽略 position: sticky，屏幕阅读器也可能把第一行当数据读。
常见错误现象：
-
<table><tbody><tr><td>...</td></tr></tbody><thead><tr><th>月份</th></tr></thead></table>—— 结构合法但语义失效，固定表头、分页打印、ARIA 关联全受影响 - 用
<td>替代<th>在thead里 —— 屏幕阅读器读作“一月”，而不是“月份：一月”
thead 里只能放 tr，且每个单元格必须是 th
thead 的语义是“列定义”，不是“第一行数据”。<th scope="col">用户名</th> 告诉辅助技术：这一列所有 <td> 都属于“用户名”，而 <td>用户名</td> 完全丢失这种映射关系。
使用场景：
立即学习“前端免费学习笔记（深入）”；
- 单级表头：
<th scope="col">产品</th><th scope="col">销量</th> - 多级表头（如“销售额”下分“Q1/Q2”）：顶层
<th>仍必须在thead内，用colspan或rowspan嵌套，不能挪到tbody里 - 不推荐给
th加id再用headers属性反向绑定 —— 简单表格直接用scope更可靠
固定表头滚动时，tbody 必须设高度和 overflow
只给 thead 加 position: sticky; top: 0 不够，tbody 必须配合约束，否则滚动无效或布局塌陷：
-
tbody需设display: block或max-height: 400px+overflow-y: auto - 整表要加
table-layout: fixed，否则列宽随内容撑开，thead和tbody列对不齐 - 避免用
height: 100%—— 它依赖父容器高度，而tbody默认是display: table-row-group，高度计算不可靠
JS 动态操作 tbody，别碰 thead 和 tfoot
所有增删改查必须限定在 tbody 内，否则极易破坏结构：
- 正确：
document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>新数据</td></tr>'); - 错误：
table.insertRow(-1)—— 可能插进tfoot，甚至把行插到thead后面却当成数据行处理 - 遍历数据行时用
document.querySelectorAll('tbody tr')，而非table.rows—— 后者包含thead和tfoot的行
复杂点在于：thead 和 tfoot 是静态结构，哪怕你用 JS 渲染整个表格，也要确保它们在 DOM 中始终同级、列数严格对齐——少一列或多一列，可访问性、打印分页、CSS 固定都会出问题。
