复杂表头需通过多行协同与精确的rowspan、colspan实现，必须确保每行colspan总和等于总列数，rowspan跨行位置留空，且th只能在thead内，否则破坏语义与无障碍支持。
复杂表头不是靠堆砌 <th> 实现的，关键在 <code><thead> 内多行 <code><tr> 的协同，配合精确的 <code>rowspan 和 colspan。写错一行，整列对齐就崩；漏删一个单元格，屏幕阅读器和打印样式都会出问题。
多行表头必须用多行 <tr>，不能只靠 <code><th> 嵌套
<p>常见错误是把所有层级都塞进一个 <code><tr> 里，比如：<code><tr>
<th>班级</th>
<th colspan="2">学科</th>
<th>语文</th>
<th>数学</th>
</tr>——这会导致第二层“语文/数学”和第一层“学科”错位，因为“学科”只占一格，却要覆盖后面两格，但没留出空位。
- 正确结构：第一行
<tr> 定义顶层分组（用 <code>colspan 或 rowspan 占位），第二行 <tr> 填具体列名
<li>每行 <code><tr> 中所有 <code><th> 的 <code>colspan 总和必须等于最终列数（例如共6列，那该行所有 colspan 值加起来就得是6）
- 跨行单元格（如“班级”
rowspan="3"）必须出现在它所跨越的第一行，后续行对应列位置不能再出现任何 <th> 或 <code><td>
<h3>
<code>rowspan 和 colspan 的数值怎么算才不翻车
<tr> 定义顶层分组（用 <code>colspan 或 rowspan 占位），第二行 <tr> 填具体列名
<li>每行 <code><tr> 中所有 <code><th> 的 <code>colspan 总和必须等于最终列数（例如共6列，那该行所有 colspan 值加起来就得是6）
rowspan="3"）必须出现在它所跨越的第一行，后续行对应列位置不能再出现任何 <th> 或 <code><td>
<h3>
<code>rowspan 和 colspan 的数值怎么算才不翻车本质是网格占位：表格是一张二维网格，合并就是让某个单元格“吃掉”相邻格子。你设了 rowspan="2"，就得确保下一行同一列位置没有别的单元格；设了 colspan="3"，就得从当前列开始往后跳过两个列位。
- 画草图最稳：先标出最终有多少列（比如6列），再逐行分配每个
<th> 的 <code>colspan，加起来必须等于6 -
rowspan要同步检查行数：若某<th> 设 <code>rowspan="2"，那它下面那一行的同一列必须留空（不写任何<th> 或 <code><td>） <li>别写 <code>rowspan="1"或colspan="1"——浏览器默认就是1，显式写反而干扰排查 - 校验工具（如 W3C Validator）会直接报错
Column span X does not fit in table with Y columns，说明总和对不上 - 标准顺序只能是：
<thead> → <code><tfoot> → <code><tbody> <li>视觉上想让页脚“粘底”？用 CSS：<code>tfoot { position: sticky; bottom: 0; }，前提是容器有明确高度且启用滚动 <tfoot> 内每行 <code><tr> 的单元格数量，必须与 <code><thead> 或 <code><tbody> 对齐，否则浏览器会自动补空 <code><td>，可能破坏 colspan 计算 <p>真正难的不是写对属性，而是保持每一行的列数总和恒定、每一处 rowspan 的跨行位置不冲突、以及坚持把所有语义性结构留在 <code><thead> 内——这些地方一旦松动，后期加筛选、导出 Excel、适配无障碍，全都会出隐性故障。</thead>
为什么 <tbody> 里绝对不能放 <code><th>
<p>HTML 规范明确定义：<code><tbody> 只允许子元素为 <code><tr>，而 <code><tr> 在 <code><tbody> 中只允许包含 <code><td>。写进去 <code><th>，浏览器会自动纠错（比如把它移到 <code><thead> 外或静默忽略），但语义已损坏。<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/skill3458" title="html-ppt-to-pdf"><img
src="https://img.php.cn/upload/skill/000/000/081/178956546773641.jpg" alt="html-ppt-to-pdf" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill3458" title="html-ppt-to-pdf">html-ppt-to-pdf</a>
<p>将使用 `<section class="slide">` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。</p>
</div>
<a href="/xiazai/skill3458" title="html-ppt-to-pdf" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>ARIA 屏幕阅读器可能跳过该单元格，或误读为“标题”，导致残障用户无法理解数据上下文</li>
<li>想实现“行标题”效果？用 <code><td scope="row"> 替代，它合法、语义清晰、CSS 也能同样控制样式
<li>需要列标题在滚动时始终可见？那是 CSS 或 JS 的事（比如 <code>position: sticky），不是往 <tbody> 里硬塞 <code><th> 的理由
<li>W3C Validator 会直接报错：<code>Element th not allowed as child of element tbody
<tfoot> 必须写在 <code><tbody> 前面，哪怕你想让它显示在底部
<p>这不是视觉顺序问题，而是 HTML 渲染机制要求：<code><tfoot> 需要被浏览器提前解析，才能支持长表格分页、打印预估、以及 <code>display: table-footer-group 的正确行为。DOM 顺序写错，旧版 Safari 和多数打印样式会失效。
<tfoot> 必须写在 <code><tbody> 前面，哪怕你想让它显示在底部
<p>这不是视觉顺序问题，而是 HTML 渲染机制要求：<code><tfoot> 需要被浏览器提前解析，才能支持长表格分页、打印预估、以及 <code>display: table-footer-group 的正确行为。DOM 顺序写错，旧版 Safari 和多数打印样式会失效。
