现代表格结构底线是必须使用 thead 和 tbody：thead 必须在 tbody 前，仅含 th 元素以确保语义化；tbody 是唯一允许动态操作的区域；三者须同级直属于 table，列数严格对齐，否则影响可访问性、固定表头、打印及 JS 操作。
必须用 thead 和 tbody，不是“可选优化”，而是现代表格的结构底线——没它们，固定表头、无障碍访问、分页打印、语义化 JS 操作都会出问题。
为什么浏览器强制要求 thead 必须在 tbody 前面写？
HTML 规范明确要求 thead 是 table 的第一个内容子元素（caption 和 colgroup 之后），tfoot 要紧随其后，tbody 才能出现。这不是书写习惯，是解析逻辑：
- 浏览器在流式加载 HTML 时，看到
thead就立刻渲染表头，用户无需等待全部数据到达； -
tfoot写在tbody前，能让浏览器提前知道“汇总行长什么样”，即使tbody还在下载或 JS 动态填充，页脚也能先占位并参与打印分页； - 如果把
tbody写在最前，某些旧版 Safari 或 IE 可能忽略thead的 sticky 行为，或导致屏幕阅读器重复读错表头； - DOM 构建顺序 ≠ 渲染顺序：哪怕你把
tfoot放最前面，浏览器仍会把它渲染在表格底部——但前提是它出现在 DOM 中tbody之前。
thead 里只能放 tr，而且必须用 th 不是 td
thead 的语义是“列定义”，不是“第一行数据”。用 td 会导致屏幕阅读器无法识别这是表头，ARIA 属性如 scope="col" 也会失效：
-
<th scope="col">用户名</th>告诉辅助技术：“这一列所有数据都属于‘用户名’”； - 如果写成
<td>用户名</td>，读屏软件只会读作“用户名”，不会关联后续每行的对应单元格； -
th默认加粗居中，但样式可覆盖；重点是语义不可替换； - 多级表头（如“销售额”下分“Q1”“Q2”）需用
colspan/rowspan合理嵌套，但顶层th仍必须在thead内。
tbody 是唯一允许动态增删的区域，JS 操作必须限定在这里
直接对 table 元素调用 insertRow() 或遍历 rows 集合，会混入 thead 和 tfoot 的行，极易出错：
立即学习“前端免费学习笔记（深入）”；
- 正确做法：
document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>新数据</td></tr>'); - 错误写法：
table.insertRow(-1)—— 它可能插到tfoot里，甚至破坏表结构； - 用
querySelectorAll('tbody tr')替代table.rows，避免把表头/页脚当数据行处理； - 服务端渲染或模板引擎（如 Vue/React）生成表格时，确保数据循环只包裹在
tbody内，thead和tfoot应作为静态结构单独存在。
CSS 固定表头滚动时，tbody 高度和 overflow 设置容易漏掉关键约束
仅给 thead 加 position: sticky; top: 0 不够，tbody 必须配合限制高度与溢出行为，否则滚动无效或布局塌陷：
-
tbody需设固定高度（如max-height: 400px）或使用height: fit-content+max-height组合； -
tbody必须有display: block（默认是table-row-group），否则overflow-y: auto不生效； - 此时
tr和td会丢失表格布局，需补上：tr { display: table-row; }，td, th { display: table-cell; }； - 列宽同步问题：如果
thead th和tbody td宽度不一致，滚动时会出现错位——推荐用table-layout: fixed+ 显式设置width或min-width。
最容易被忽略的是：三者必须同级直属于 table，中间不能插 div 或其他包裹；列数必须严格对齐；空 thead 或缺失 tbody 会让 HTML 验证失败，且部分 SSR 框架会静默降级为普通 tr，失去所有语义能力。
