合并表格单元格本质是定义矩形区域起点，后续行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 都得数清楚这行还剩几列可填。结构恒定，才是表格能稳定输出、可访问、可导出的前提。