多行表头必须用多层嵌套结构，每层单独一行并严格对齐列数；禁止将所有th塞入同一行靠rowspan/colspan模拟分层，否则导致列数错乱、读屏器误读、打印错位。

多行表头必须用多嵌套，不是往一个 里塞一堆

浏览器不认“视觉上叠在一起”的表头，只认 DOM 结构里的 <tr> 层级。常见错误是把所有 <code><th> 都写进同一行，指望靠 <code>rowspan 和 colspan 挤出多层效果——结果列数算不准、屏幕阅读器读成一串乱码、打印时页脚错位。

正确做法是：每层表头单独一行 <tr>，靠 <code>rowspan 和 colspan 控制跨行跨列范围，让每一行的单元格总数严格对齐。

• 第一行 <tr> 写顶层分组，比如 <code><th rowspan="2">部门</th> <th colspan="3">Q1业绩</th>
• 第二行 <tr> 写子项，比如 <code><th>销售额</th> <th>成本</th> <th>毛利</th>（对应前面 colspan="3"）
• 所有 <th> 必须包在 <code><thead> 里，<code><tbody> 中出现 <code><th> 会被浏览器自动纠错，但语义已损坏 <h3>ROWSPAN 和 COLSPAN 同时用，先算“占位面积”，再留空</h3> <p><code>rowspan="2" colspan="3" 不是“合并 2 行 3 列”，而是占据一个 2×3 的矩形区域——共 6 个逻辑单元格位置。这些位置在后续 <tr> 中必须全部留空，否则结构崩塌。 <p>典型翻车点：在第 0 行写了 <code><th rowspan="2" colspan="2">指标</th>，结果第 1 行还硬塞了 <td>实际值</td> 在第 0 列，导致该 <td> 被挤到第 2 列，整行数据右移。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill6712" title="Wechat HTML Publisher">Wechat HTML Publisher</a> <p>直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul><li>设 <code>rowspan="N"，后面 N−1 行中，该列位置不能出现任何 <td> 或 <code><th> <li>设 <code>colspan="M"，当前行总列数 = 所有 colspan 值之和 + 未合并单元格数，这个总数必须恒定
• 调试时打开开发者工具，选中单元格看 grid-row 和 grid-column 计算值，比肉眼数格子靠谱

为什么里不能写，哪怕加了scope属性

HTML 规范明确禁止 <tbody> 包含 <code><th>。浏览器会尝试修复，比如把 <code><th> 提到 <code><thead> 外或直接丢弃，但可访问性已失效——ARIA 屏幕阅读器可能跳过、重复读、或完全误解上下文。 <p>需要“行标题”？用 <code><td scope="row"> 替代；需要“列标题”在每行显示？那是 UI 设计问题，该用 CSS <code>position: sticky 固定表头，而不是在 <tbody> 里硬塞非法标签。 <ul> <li>W3C Validator 会直接报错：<code>Element th not allowed as child of element tbody

<tfoot> 必须写在 <code><tbody> 之前，否则 Safari 旧版和部分打印引擎会忽略页脚 <li>所有 <code>rowspan="1" 或 colspan="1" 都该删掉，默认值写出来反而干扰结构校验

复杂表头最容易被忽略的校验点

不是“看起来对齐了就行”，而是每行单元格总数是否真的一致、每个被 rowspan 占用的位置是否真的留空、<thead> 最后一行的 <code><th> 数量是否等于 <code><tbody> 每行 <code><td> 数量——这三个点漏一个，表格在窄屏、打印、读屏器下就大概率出问题。 <p>建议手写完先用 W3C Validator 过一遍，再在 Chrome / Safari / Firefox 里分别检查响应式缩放和打印预览。别等上线后被财务或审计人员指着说“导出 Excel 列错位”。</p> </td>