合并表格单元格本质是定义矩形区域起点，后续行td数量须动态减去被colspan/rowspan占用的列数，否则引发结构错误而非渲染异常。
直接说结论：合并表格单元格不是“加个属性就完事”，colspan 和 rowspan 本质是定义一个矩形区域的左上角起点，后续所有行的 <td> 数量必须动态减去已被占用的列数，否则浏览器会强行补空、JS 拿不到 <code>row.cells、打印错位、屏幕阅读器读错——这些都不是渲染异常，而是结构错误。
colspan="n" 怎么算列数？别数错总列数
它表示「这个单元格向右占满 n 列」，不是“加宽 n 像素”。关键约束是：该行所有 <td> 和 <code><th> 的 <code>colspan 值之和必须等于表格设计的总列数。
- 比如总列数是 5，第一格写
colspan="3"，后面只能再放 2 个普通<td>（或 1 个 <code>colspan="2"） - 常见翻车：
<tr> <th colspan="4">标题</th> <td>A</td> <td>B</td> </tr>→ 这行实际有 6 列宽度，浏览器会把最后两个<td> 挤到下一行或补空，但 DOM 中 <code>row.cells.length可能还是 3 - 表头用
colspan时，下层<tr> 的 <code><th>/</th> <td> 数量必须严格对齐；否则 <code>scope属性失效，WCAG 检查通不过rowspan="n" 不是画高框，是“锁列”
rowspan不改变当前行高度，而是从当前行起，“向下锁定该列位置共 n 行”。后续每行的<td> 数量 = 总列数 − 当前列已被上层 <code>rowspan占用的列数。- 典型错误：
<tr> <td rowspan="3">服务器</td> <td>CPU</td> </tr> <tr> <td>内存</td> <td>硬盘</td> </tr>→ 第二行多写了一个<td>，因为第 1 列已被锁定，这行只能有 1 个 <code><td> <li>JS 动态插入行（如 <code>insertRow()）时，rowspan不会自动重算布局，新行仍按原始列数生成，极易导致row.cells[1]是undefined - 打印或 PDF 导出错行，90% 是某行少写了
<td>，视觉上看不出，但渲染引擎已按矩阵逻辑补位 <h3>同时用 colspan 和 rowspan：被覆盖的 <td> 必须删干净 <p>一旦设了 <code>rowspan="2" colspan="3"，就代表这个单元格覆盖 2 行 × 3 列共 6 个原始格子。被覆盖区域内的其他<td> 必须全部删除——不能留空标签，也不能用 <code><td></td>占位。- 同一行里，若
<td rowspan="2"> 占了第 1 列，那它右边的 <code><td colspan="3"> 就只能从第 2 列开始算起，且整行列数仍要对齐总列数 <li>复杂表头建议先手绘草图，标出每个单元格覆盖的行列范围，再转成 HTML；否则靠试错调试成本极高</li> <li>响应式场景下，<code>colspan/rowspan在小屏不会折行或重组，只会横向溢出；真要兼容移动端，优先用display: grid或卡片堆叠，而不是硬撑表格结构
真正难的不是写对属性，而是每次改一个
rowspan都得顺手检查下面两行的<td> 数；每次加 <code>colspan都得数清楚这行还剩几列可填。结构恒定，才是表格能稳定输出、可访问、可导出的前提。 - 同一行里，若
- 典型错误：
