正确做法是每行表头对应一个，用colspan横向合并、rowspan纵向跨行，如班级学科语文数学，所有须在内，中禁用。
如何用 <thead> 正确嵌套多层表头
<p>多行表头不是靠 <code><th> 堆叠出来的，关键在 <code><tr> 的层级配合。常见错误是把所有 <code><th> 都塞进同一行，结果 colspan/rowspan 乱套、语义丢失、屏幕阅读器读不出结构。
<p>正确做法是：每行表头对应一个 <code><tr>，用 <code>colspan 横向合并单元格，用 rowspan 纵向跨行。例如「学科」下分「语文」「数学」，需两行：<tr>
<th rowspan="2">班级</th>
<th colspan="2">学科</th>
</tr> + <tr>
<th>语文</th>
<th>数学</th>
</tr>。
-
rowspan 和 colspan 必须同时满足整行/整列的单元格数总和为 1（即不重叠、不缺口）
- 所有
<th> 应保留在 <code><thead> 内，不要混进 <code><tbody>
<li>避免用 <code>rowspan="1" 或 colspan="1" —— 这是默认值，显式写反而干扰可读性
为什么 <tbody> 里不能出现 <code><th>
<p>HTML 规范明确要求 <code><tbody> 只能包含 <code><tr>，而 <code><tr> 在 <code><tbody> 中只允许子元素为 <code><td>。一旦写 <code><th>，浏览器会自动纠错（比如把 <code><th> 提到 <code><thead> 外或忽略），但语义已破坏，ARIA 屏幕阅读器可能跳过或误读。
<ul><li>需要“行标题”？用 <code><td scope="row"> 替代 <code><th>，它既保持语义又合法
<li>需要“列标题”重复出现在每行？那是设计问题，应靠 CSS 固定表头或 JS 滚动同步，而非在 <code><tbody> 里硬塞 <code><th>
<li>校验工具（如 W3C Validator）会直接报错 <code>Element th not allowed as child of element tbody
<tfoot> 的位置必须写在 <code><tbody> 之前
<p>这是 HTML 渲染机制决定的：浏览器希望提前知道页脚内容，以便在长表格中实现“页脚固定显示”或“分页预估”。如果把 <code><tfoot> 放在 <code><tbody> 后面，多数浏览器仍能渲染，但部分旧版 Safari 或打印样式会失效，且 <code>display: table-footer-group 可能不生效。
- 标准顺序只能是：
<thead> → <code><tfoot> → <code><tbody><li><code><tfoot> 里也只允许 <code><tr>，且每行 <code><td> 数量必须与 <code><thead> 或 <code><tbody> 对齐（否则触发自动补空单元格）
<li>想让页脚显示在视觉底部？别靠 DOM 顺序，用 CSS：<code>tfoot { display: table-row-group; } 是默认行为；若要“粘底”，需配合容器高度 + position: sticky
响应式复杂表头下，colspan 和 rowspan 容易崩的原因
媒体查询缩放或 flex/grid 布局介入时，colspan 不会自动折行，rowspan 也不随高度变化重算 —— 它们是静态布局属性，只在初始渲染时计算一次。结果就是小屏下文字挤成一团、边框断裂、甚至整行错位。
- 移动端优先方案：用 CSS
display: grid 或 display: flex 重构表头逻辑，放弃原生 colspan/rowspan
- 若必须保留 table 结构，可在小屏时用 JS 动态移除
colspan/rowspan，改用嵌套 <div> 模拟分组，并加 <code>aria-label 补充语义
- 测试时务必在 iOS Safari 和 Chrome DevTools 的 device toolbar 下检查
<th> 文字是否溢出、是否被截断 —— 这比视觉错位更隐蔽，但影响无障碍访问
</th>
rowspan 和 colspan 必须同时满足整行/整列的单元格数总和为 1（即不重叠、不缺口）<th> 应保留在 <code><thead> 内，不要混进 <code><tbody>
<li>避免用 <code>rowspan="1" 或 colspan="1" —— 这是默认值，显式写反而干扰可读性为什么 <tbody> 里不能出现 <code><th>
<p>HTML 规范明确要求 <code><tbody> 只能包含 <code><tr>，而 <code><tr> 在 <code><tbody> 中只允许子元素为 <code><td>。一旦写 <code><th>，浏览器会自动纠错（比如把 <code><th> 提到 <code><thead> 外或忽略），但语义已破坏，ARIA 屏幕阅读器可能跳过或误读。
<ul><li>需要“行标题”？用 <code><td scope="row"> 替代 <code><th>，它既保持语义又合法
<li>需要“列标题”重复出现在每行？那是设计问题，应靠 CSS 固定表头或 JS 滚动同步，而非在 <code><tbody> 里硬塞 <code><th>
<li>校验工具（如 W3C Validator）会直接报错 <code>Element th not allowed as child of element tbody
<tfoot> 的位置必须写在 <code><tbody> 之前
<p>这是 HTML 渲染机制决定的：浏览器希望提前知道页脚内容，以便在长表格中实现“页脚固定显示”或“分页预估”。如果把 <code><tfoot> 放在 <code><tbody> 后面，多数浏览器仍能渲染，但部分旧版 Safari 或打印样式会失效，且 <code>display: table-footer-group 可能不生效。
- 标准顺序只能是：
<thead> → <code><tfoot> → <code><tbody><li><code><tfoot> 里也只允许 <code><tr>，且每行 <code><td> 数量必须与 <code><thead> 或 <code><tbody> 对齐（否则触发自动补空单元格）
<li>想让页脚显示在视觉底部？别靠 DOM 顺序，用 CSS：<code>tfoot { display: table-row-group; } 是默认行为；若要“粘底”，需配合容器高度 + position: sticky
响应式复杂表头下，colspan 和 rowspan 容易崩的原因
媒体查询缩放或 flex/grid 布局介入时，colspan 不会自动折行，rowspan 也不随高度变化重算 —— 它们是静态布局属性，只在初始渲染时计算一次。结果就是小屏下文字挤成一团、边框断裂、甚至整行错位。
- 移动端优先方案：用 CSS
display: grid 或 display: flex 重构表头逻辑，放弃原生 colspan/rowspan
- 若必须保留 table 结构，可在小屏时用 JS 动态移除
colspan/rowspan，改用嵌套 <div> 模拟分组，并加 <code>aria-label 补充语义
- 测试时务必在 iOS Safari 和 Chrome DevTools 的 device toolbar 下检查
<th> 文字是否溢出、是否被截断 —— 这比视觉错位更隐蔽，但影响无障碍访问
</th>
<tfoot> 的位置必须写在 <code><tbody> 之前
<p>这是 HTML 渲染机制决定的：浏览器希望提前知道页脚内容，以便在长表格中实现“页脚固定显示”或“分页预估”。如果把 <code><tfoot> 放在 <code><tbody> 后面，多数浏览器仍能渲染，但部分旧版 Safari 或打印样式会失效，且 <code>display: table-footer-group 可能不生效。
- 标准顺序只能是：
<thead> → <code><tfoot> → <code><tbody><li><code><tfoot> 里也只允许 <code><tr>，且每行 <code><td> 数量必须与 <code><thead> 或 <code><tbody> 对齐（否则触发自动补空单元格） <li>想让页脚显示在视觉底部？别靠 DOM 顺序，用 CSS：<code>tfoot { display: table-row-group; }是默认行为；若要“粘底”，需配合容器高度 +position: sticky - 移动端优先方案：用 CSS
display: grid或display: flex重构表头逻辑，放弃原生colspan/rowspan - 若必须保留 table 结构，可在小屏时用 JS 动态移除
colspan/rowspan，改用嵌套<div> 模拟分组，并加 <code>aria-label补充语义 - 测试时务必在 iOS Safari 和 Chrome DevTools 的 device toolbar 下检查
<th> 文字是否溢出、是否被截断 —— 这比视觉错位更隐蔽，但影响无障碍访问 </th>
响应式复杂表头下，colspan 和 rowspan 容易崩的原因
媒体查询缩放或 flex/grid 布局介入时，colspan 不会自动折行，rowspan 也不随高度变化重算 —— 它们是静态布局属性，只在初始渲染时计算一次。结果就是小屏下文字挤成一团、边框断裂、甚至整行错位。
