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> 替代 <code><th> 在 <code>thead 里 —— 屏幕阅读器读作“一月”，而不是“月份：一月”

  thead 里只能放 tr，且每个单元格必须是 th

  thead 的语义是“列定义”，不是“第一行数据”。<th scope="col">用户名</th> 告诉辅助技术：这一列所有 <td> 都属于“用户名”，而 <code><td>用户名</td> 完全丢失这种映射关系。

  使用场景：

  

  Doc To HTML

  使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

  下载
  • 单级表头：<th scope="col">产品</th> <th scope="col">销量</th>
  • 多级表头（如“销售额”下分“Q1/Q2”）：顶层 <th> 仍必须在 <code>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 固定都会出问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！