HTML表格表头合并需手动设置th的colspan和rowspan，确保每行单元格总数匹配列数，避免错位；配合scope属性提升可访问性；复杂场景可考虑CSS Grid替代。
用 colspan 和 rowspan 控制单元格跨行跨列
HTML 表格头部合并，本质是控制 <th> 元素的 colspan（横向合并几列）和 rowspan（纵向合并几行）。没有“自动识别结构”的功能，必须手动算清行列关系。常见错误是数错列数，导致后续 <tr> 里 <th> 或 <td> 总数对不上，浏览器会悄悄补全或错位渲染。
比如一个 4 列数据表，顶部需要“成绩汇总”横跨全部 4 列，下面再分“语文/数学/英语/总分”四栏——这时第一行 <th colspan="4">成绩汇总</th>，第二行就是四个独立 <th>。
如果还要加一层“主科”“副科”分组：语文、数学归“主科”，英语归“副科”，那就要引入 rowspan。例如：
<thead>
<tr>
<th rowspan="2">学号</th>
<th colspan="2">主科</th>
<th rowspan="2">英语</th>
<th rowspan="2">总分</th>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
</tr>
</thead>嵌套表头容易漏掉 rowspan 导致列错位
多人协作或从设计稿转代码时，常只关注“视觉上哪几个字连在一起”，却忽略 DOM 层面的网格逻辑。典型表现是：表格在 Chrome 看正常，Firefox 里某列突然偏移，或者导出 Excel 时标题错列。
立即学习“前端免费学习笔记（深入）”；
关键检查点：
- 每一行
<tr>中所有<th>的colspan和rowspan值加起来，必须等于该表定义的列总数（即最底层一行的<th>个数） - 被
rowspan="2"占用的单元格，在下一行对应位置**不能重复写**<th>，否则会多出一列 - 用浏览器开发者工具选中
<th>，看 computed 样式里的grid-column范围，能快速验证是否跨列正确
复杂表头配合 scope 属性提升可访问性
单纯视觉合并不够，屏幕阅读器需要知道每个数据单元格（<td>）对应哪几个表头。这时候 scope 就不能省略。
scope="col" 表示该 <th> 是它下方整列的标题；scope="row" 表示是该行的标题；而多级表头中，顶层合并单元格通常要配 scope="colgroup" 或 scope="rowgroup"。
示例：
<th colspan="2" scope="colgroup">主科</th> <tr> <th scope="col">语文</th> <th scope="col">数学</th>
没加 scope 不影响显示，但 WCAG 合规检测会报错，视障用户也无法准确理解数据归属。
用 CSS display: grid 替代表格实现更灵活的表头布局？
当表头结构动态变化、或需要响应式折叠（比如小屏隐藏部分列名），硬写 colspan/rowspan 会越来越难维护。此时可以考虑放弃 <table>，改用语义化更松、控制力更强的 display: grid。
优势：
- 不用手动计算跨列数，用
grid-column: 1 / -1直接撑满 - 支持
@media精确控制不同断点下的标题分组方式 - 避免表格特有的边框塌陷、单元格对齐 bug
代价是失去原生 <table> 的语义（需用 role="table" 等补足），且导出 CSV/Excel 需额外解析逻辑。
真正复杂的表头，往往不是“怎么写对”，而是“值不值得坚持用 table”。如果后端返回的是扁平字段列表，前端要拼出三层嵌套标题，那大概率该重构数据结构了。
