必须将 thead 写在 tbody 前面，因 HTML 规范强制要求 thead 作为 table 的首个内容子元素（caption、colgroup 后），否则浏览器自动重排 DOM 导致 JS 节点顺序错乱；tfoot 也须紧随 thead 之后，以支持提前渲染页脚、跨页打印及无障碍预读。

为什么必须写在 前面，而不是按视觉顺序排？

浏览器解析 HTML 是流式进行的，thead 必须作为 table 的第一个内容子元素（caption 和 colgroup 之后），这是 HTML 规范强制要求，不是书写习惯。如果把 tbody 写在 thead 前面，浏览器会自动重排 DOM —— 把 thead 提到最前，但 JS 中 table.children 的顺序可能仍反映源码顺序，导致脚本取节点错乱。

更关键的是：tfoot 也必须紧随 thead 之后、tbody 之前。这样浏览器才能在 tbody 还没加载完时，就提前渲染出页脚占位，对打印跨页、首屏感知、屏幕阅读器预读都至关重要。

• thead 放最后？→ 表头渲染延迟，滚动固定失效，ARIA scope="col" 可能不被识别
• 省略 thead？→ 某些旧版 Safari 会忽略 position: sticky 行为；无障碍工具无法建立列语义关联
• 用 div + CSS 模拟表头？→ 打印时整块丢失，table.rows 集合包含表头行，JS 数据提取逻辑易崩

thead里只能放，且必须用而非

thead 的语义是“列定义”，不是“第一行数据”。里面所有单元格必须是 th，否则屏幕阅读器只会把内容当普通文本读，不会将其与后续每行的 td 关联。比如 <th scope="col">用户名</th> 明确告诉辅助技术：“这一列所有数据都属于‘用户名’”。

常见错误是复制数据行结构，写成 <td>用户名</td>，看着一样，但语义全丢。样式上 th 默认加粗居中，可用 CSS 覆盖，但标签不可替换。

立即学习“前端免费学习笔记（深入）”；

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 多级表头（如“销售额”下分“Q1”“Q2”）要用 colspan/rowspan 嵌套，但顶层仍必须是 th
• th 里嵌按钮、输入框？→ 违反语义，建议移入 tbody 或用 caption + 工具栏区域替代
• 想让某列标题左对齐？直接加 style="text-align: left" 或用 CSS 类，别改标签

固定表头滚动时，仅给加sticky不够

只写 thead th { position: sticky; top: 0; } 很容易无效。真正起作用需要三者配合：

• table 不能设 border-collapse: collapse（某些浏览器下会破坏 sticky 上下文）
• tbody 必须限制高度并设 display: block 或 max-height + overflow-y: auto
• thead 父级（即 table）需有明确宽度，列宽建议用 table-layout: fixed 配合 width 控制，否则列宽会随内容撑开、错位

另外，thead 本身不能设 height 或 line-height 过大，否则 sticky 区域可能超出可视区；测试时务必在真实长表格中验证，小数据量看不出问题。

tbody才是唯一允许动态操作的数据区域

所有 JS 插入、删除、排序行为，必须限定在 tbody 内。直接对 table 调用 insertRow() 或遍历 rows 集合，会混入 thead 和 tfoot 的行，极易出错。

• 新增行：用 document.querySelector('tbody').insertAdjacentHTML('beforeend', '<tr><td>...</td></tr>')
• 取数据行：用 document.querySelectorAll('tbody tr')，别用 table.rows
• 服务端渲染或 Vue/React 模板中，确保循环只包裹在 tbody 内，thead 和 tfoot 应作为静态结构存在

漏掉这层约束，哪怕只有一张报表页，后续加打印、导出、筛选功能时，逻辑就会悄悄偏移——不是报错，而是结果错得难以定位。