colspan和rowspan是唯一标准、语义正确且兼容稳定的表格合并方案；必须确保每行逻辑列数恒定，跨行跨列时手动删除被占位置的单元格，否则导致结构错乱、屏幕阅读器失效及打印异常。
colspan 和 rowspan 是唯一标准、语义正确且浏览器兼容性稳定的方案；别用 CSS Grid 或 JS 模拟“合并”，那不是真合并，屏幕阅读器读不到，打印也错位。
colspan="n" 怎么写才不导致右侧多出一列
本质是：这个单元格向右占了 n 个逻辑列位置，它右边原本该有的 n−1 个 <td> 必须删掉。
<ul><li>错误写法：<code><tr>
<td colspan="2">标题</td>
<td>A</td>
<td>B</td>
</tr>（共 4 列逻辑，但只声明了 3 个单元格，其中 1 个占 2 列 → 实际列数 = 2 + 1 + 1 = 4，看似对？但下一行若写 4 个 <td> 就超了）
<li>正确做法：先确定整表“最大逻辑列数”，比如 4 列 → 每行所有 <code>colspan 值加起来必须恒等于 4
colspan 值只能是正整数，colspan="2px"、colspan="two"、colspan="0" 全部无效，浏览器静默忽略Table row has fewer cells than required 控制台警告，或边框断裂、文字挤成一团rowspan="m" 为什么下面几行总多出空白列
因为浏览器不会自动“跳过”被跨占的列位置——你得手动删掉那些位置上的 <td> 或 <code><th>。
<ul>
<li>如果 <code><th rowspan="3">科目</th> 在第 1 行第 1 列，那么第 2 行和第 3 行的第 1 列位置，不能出现任何单元格标签
<td> 当作新列渲染，整行右移，后续列全错位
<li>验证方法：<code>document.querySelectorAll('tr')[0].children.length 和 document.querySelectorAll('tr')[1].children.length 对比，不等就说明结构崩了<thead>/<code><tbody> 里时，两部分展开后的逻辑列数必须一致，否则 <code>border-collapse: collapse 下边框会断开
colspan 和 rowspan 能不能一起用
能，但约束陡增：一个单元格同时设 rowspan="2" 和 colspan="3"，它实际吞掉 2×3=6 个原始格子，周围所有行/列都得按这个“吞掉量”做减法。
- 该单元格所在行：其余单元格的
colspan总和 + 3 必须等于总列数（例如总列数为 5，则其余colspan和只能是 2） - 下一行中：它覆盖的 3 列位置全部留空，不能写
<td></td>，也不能用colspan="0"（无效） - 最易漏点：
<thead> 用了 <code>colspan合并表头，<tbody> 却没按展开后列数对齐数据列，导致语义错乱、辅助技术失效 <li>复杂结构建议先画网格草图，标出每行每列的“是否被占”，再填内容，别边写边猜</li> 真正难的不是属性怎么写，而是你得在写第一行之前，就清楚整张表所有行列的“逻辑占位关系”。浏览器不校验结构，只按你写的标签硬渲染——错一位，整张表就偏。</tbody>
