必须显式写出且置于第二子元素位置，否则sticky失效、w3c报错、打印丢表头、js获取tbody为空；是fixed布局下唯一可靠列宽控制入口，需配合span和scope实现语义分组与读屏支持。

为什么必须写在 前面，且不能省略

浏览器解析 HTML 是流式的，<thead> 出现在 DOM 早期，才能让表头提前渲染、固定定位生效、屏幕阅读器第一时间识别列结构。如果漏写 <code><thead> 或把它放在 <code><tbody> 后面，后果不是“看起来差不多”，而是：<ul>滚动时 <code>position: sticky 失效（尤其 Safari）

W3C 校验直接报错 Element thead not in expected location

打印时多页表格只在第一页显示表头

JS 操作 document.querySelector('tbody') 可能返回空，因为浏览器自动补的 <tbody> 和你写的嵌套层级不一致必须显式写出 <code><thead>，且它只能是 <code><table> 的第二个子元素（<code><caption></caption> 和 <colgroup></colgroup> 之后），<tbody> 紧随其后。 <h3>colgroup 怎么配合 colspan/rowspan 控制列宽与语义分组</h3> <p><code><colgroup></colgroup> 不是装饰性标签，它是 table-layout: fixed 下唯一可靠的列宽控制入口，也是大范围列分组的语义锚点。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

每列宽度必须由 <col> 显式声明，例如：<col style="width: 120px"> <col style="width: auto"> <col style="width: 80px">；<th> 或 <code><td> 上的 <code>width 属性会被忽略
• 横向合并（colspan）的表头，如「Q1 销售」跨两列，应在对应 <colgroup></colgroup> 中用 span="2" 声明：<colgroup span="2"> <col> <col> </colgroup>
• 需要为「Q1 销售」这类分组标题提供语义，就在该 <th colspan="2"> 上加 <code>scope="colgroup"，其下两个子标题（「线上」「线下」）则各带 scope="col"
• 避免在 <colgroup></colgroup> 里混用 width 和 span——span 表示逻辑分组数，width 表示单列物理尺寸，二者不兼容

  tbody 多段拆分对性能和可访问性的实际影响

  一个 <table> 允许多个 <code><tbody>，这不是语法糖，而是针对大数据场景的结构化切口。<ul>分页加载时，每次插入新数据只需 <code>appendChild 一个新 <tbody>，而不是重写整个 <code><tbody> 内部 HTML，避免重排重绘抖动<li>按业务维度拆分（如「实际支出」「预算对比」「差异分析」），每个 <code><tbody> 加 <code>aria-label，屏幕阅读器能区分区块用途

• 每个 <tbody> 必须保持列数一致，否则浏览器会自动补空 <code><td>，导致 JS 获取 <code>tr.cells.length 出错
• 虚拟滚动库（如 react-virtualized）依赖 <tbody> 边界做行级缓存，混在一个 <code><tbody> 里会导致缓存失效、内存泄漏 <h3>scope 属性写错或漏写时，读屏软件到底怎么读</h3> <p>不写 <code>scope，或写成 scope="col" 却放在行标识列上，读屏软件不会报错，但会用模糊策略推断关联关系，结果极不可靠。
  当某列是行标题（如「学生姓名」），却没给 <td scope="row">，读屏软件可能把「张三」当成普通数据，读作“张三”，而非“张三，语文，85”<li>当 <code><th colspan="2">学科 缺少 <code>scope="colgroup"，而下面两列 <th>语文</th> <th>数学</th> 又没写 scope="col"，读屏软件可能跳过「学科」，直接读「语文」「数学」，丢失分组上下文
  • 多个 <tbody> 共享同一 <code><thead> 时，每个 <code><tbody> 内部的 <code>scope="row" 必须独立设置——不能指望复用上一个 <tbody> 的语义<li>最隐蔽的坑：动态更新 <code><tbody> 后，新插入的 <code><td scope="row"> 如果没同步补全 <code>headers 属性（用于跨 <thead> 关联），读屏软件就会读错列名 复杂表格不是靠堆功能实现的，而是靠每一处 <code><thead> 的位置、每一个 <code><col> 的宽度、每一行 scope 的指向，都严丝合缝。稍有松动，可访问性就断链，JS 就难定位，打印就丢头，滚动就错位。

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