colspan="n"表示该单元格向右占据n列，整行所有单元格的colspan值之和必须等于表格总列数；rowspan="n"表示从当前行起向下占据n行，后续对应列位置必须跳过，被覆盖的单元格须彻底删除。
colspan="n" 是怎么算列数的
它表示「这个 <td> 向右占满 n 列」，不是“加宽一点”或“视觉上撑开”。整行所有 <td> 和 <th> 的 colspan 值加起来，必须等于该表格的总列数（通常由第一行 <th> 数量决定）。
常见错误现象：Table row has fewer cells than required 报错、某行突然变短、导出 PDF 时列错位。
-
<td colspan="3">标题</td><td>A</td><td>B</td>✅（3+1+1=5，总列数为 5） -
<td colspan="3">标题</td><td>A</td><td>B</td><td>C</td>❌（3+1+1+1=6），浏览器会忽略最后一个<td>或补空格，JS 读取row.cells时可能返回undefined - 别用
colspan去“对齐文字”或“撑宽度”——那是width或CSS grid-column的事
rowspan="n" 不是画一个高框，而是锁定位置
rowspan 不是让单元格“变高”，而是告诉浏览器：“从当前行起，接下来 n 行里，这一列的位置被我占了，别人不许动”。后续行中，对应列位置必须跳过，<td> 数量要相应减少。
使用场景：表头分组（如“年度小计”跨两行）、数据汇总栏、固定侧边栏标题。
立即学习“前端免费学习笔记（深入）”；
- 如果写了
<td rowspan="2">A</td>，下一行就不能再写<td>C</td><td>D</td>——否则第二列会被强行插入，破坏纵向结构 - 正确写法是：下一行只写
<td>C</td>（假设 A 占第 1 列，只剩第 2 列可用） - 动态插入行（
insertRow()）后尤其容易出问题：JS 生成的行若没按rowspan逻辑跳过列，row.cells[0]可能为undefined
同时用 colspan 和 rowspan 时最常漏掉的三件事
这不是属性叠加，而是在表格矩阵中划出一个矩形区域：左上角单元格设 rowspan 和 colspan，其余被覆盖的格子必须彻底删除。
- 删干净：被
rowspan="2" colspan="3"覆盖的 5 个格子（除左上角外），不能留空<td></td>，也不能用注释占位 - 对齐总列数：若第 1 列已被
<td rowspan="2">占用，则同一行中后续<td colspan="3">必须从第 2 列开始算起，整行仍需凑够总列数 - 检查后续两行：改了一个
rowspan，就得顺手数清楚下面两行各自还剩几个<td>可写——这才是真正难维护的地方
colspan/rowspan 不是美化工具，是语义结构声明
它们定义的是表格的逻辑结构，不是视觉样式。写错不会报错，但后果隐蔽且严重：
- JS 读取
row.cells返回undefined，导致数据提取失败 - 屏幕阅读器把表头和数据关联错，残障用户无法理解表格含义
- React/Vue 渲染时出现不可预测的
<tbody>错位，尤其在条件渲染或列表更新后 - 打印 PDF 时纵向错位，90% 是某行少写了
<td>，肉眼看着整齐，实际矩阵已偏移
复杂点在于：你改了一处 rowspan，可能要手动校验三行以上的单元格数量；容易被忽略的是——删掉被覆盖的 <td> 这一步，很多人以为留着空标签没关系，其实它会破坏整个表格的 DOM 矩阵。
