多行表头必须用多层嵌套结构，每层单独一行并严格对齐列数；禁止将所有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 列，整行数据右移。
<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><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" 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 rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</td>
浏览器不认“视觉上叠在一起”的表头，只认 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 列，整行数据右移。 <ul><li>设 <code>rowspan="N"，后面 N−1 行中，该列位置不能出现任何<td> 或 <code><th> <li>设 <code>colspan="M"，当前行总列数 = 所有colspan值之和 + 未合并单元格数，这个总数必须恒定 - 调试时打开开发者工具，选中单元格看
grid-row和grid-column计算值，比肉眼数格子靠谱 <tfoot> 必须写在 <code><tbody> 之前，否则 Safari 旧版和部分打印引擎会忽略页脚 <li>所有 <code>rowspan="1"或colspan="1"都该删掉，默认值写出来反而干扰结构校验
为什么里不能写，哪怕加了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
复杂表头最容易被忽略的校验点
不是“看起来对齐了就行”，而是每行单元格总数是否真的一致、每个被 rowspan 占用的位置是否真的留空、<thead> 最后一行的 <code><th> 数量是否等于 <code><tbody> 每行 <code><td> 数量——这三个点漏一个，表格在窄屏、打印、读屏器下就大概率出问题。
<p>建议手写完先用 W3C Validator 过一遍，再在 Chrome / Safari / Firefox 里分别检查响应式缩放和打印预览。别等上线后被财务或审计人员指着说“导出 Excel 列错位”。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" 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 rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</td>
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
复杂表头最容易被忽略的校验点
不是“看起来对齐了就行”，而是每行单元格总数是否真的一致、每个被 rowspan 占用的位置是否真的留空、<thead> 最后一行的 <code><th> 数量是否等于 <code><tbody> 每行 <code><td> 数量——这三个点漏一个，表格在窄屏、打印、读屏器下就大概率出问题。
<p>建议手写完先用 W3C Validator 过一遍，再在 Chrome / Safari / Firefox 里分别检查响应式缩放和打印预览。别等上线后被财务或审计人员指着说“导出 Excel 列错位”。</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" 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 rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
</div>
<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
