colspan和rowspan是定义表格结构的语义属性，非美化工具；colspan="n"表示向右占满n列，整行单元格colspan总和须等于表格总列数；rowspan="n"表示占据当前列后续n行位置，后续行对应列必须跳过；混用时需彻底删除被覆盖单元格，并严格校验每行列数与跨行占用关系。
colspan 和 rowspan 不是用来“美化表格”的，它们是定义表格结构的语义属性——一旦写错，浏览器不会报错，但 JS 读取 row.cells 会返回 undefined，打印导出错行，屏幕阅读器读错表头关联，甚至 React/Vue 渲染时出现不可预测的 tbody 错位。
colspan="n" 是怎么算列数的
它表示「这个 <td> 向右占满 n 列」，不是“加宽 2 像素”或“看起来宽一点”。整行所有 <code><td> 和 <code><th> 的 <code>colspan 值加起来，必须等于该表格声明的总列数（通常由第一行 <th> 数量决定）。
<ul>
<li>表头有 5 列 → 每行所有单元格的 <code>colspan 总和必须是 5
<td colspan="3">标题</td>
<td>A</td>
<td>B</td> ✅（3+1+1=5）<td colspan="3">标题</td>
<td>A</td>
<td>B</td>
<td>C</td> ❌（3+1+1+1=6），浏览器会强行忽略最后一个 <td> 或补空单元格，导致结构失真
<li>别用 <code>colspan 去“对齐文字”或“撑开某列宽度”——那是 width 或 CSS grid-column 的事rowspan="n" 不是画一个高框，而是锁定位置
rowspan 不是让单元格“变高”，而是告诉浏览器：“从当前行起，接下来 n 行里，这一列的位置被我占了，别人不许动”。后续行中，对应列位置必须跳过，<td> 数量要相应减少。
<ul>
<li>
<code><tr>
<td rowspan="2">A</td>
<td>B</td>
</tr> → 下一行只能写 <tr><td>C</td></tr>（因为第 1 列已被 A 占用，只剩第 2 列可填）
<td>C</td>
<td>D</td>，浏览器会渲染成 2 列，但 JS 中 row.cells[0] 可能是 undefined，尤其在动态插入行（insertRow()）后更明显<td>，肉眼看着整齐，实际矩阵已偏移
<h3>同时用 colspan 和 rowspan 时最常漏掉的三件事</h3>
<p>二维合并不是属性叠加，而是在表格矩阵中划出一个矩形区域，左上角单元格设 <code>rowspan 和 colspan，其余被覆盖的格子必须彻底删除。
- 删干净：被
rowspan="2" colspan="3"覆盖的 5 个格子（除左上角外），不能留空<td></td>，也不能用注释占位 - 对齐总列数：若第 1 列已由
<td rowspan="2"> 占用，则同一行中后续 <code><td colspan="3"> 必须从第 2 列开始算起，整行仍需凑够总列数 <li>检查后续两行：改了一个 <code>rowspan，就得顺手数清楚下面两行各自还剩几个<td> 可写——这才是真正难维护的地方 <p>真正卡住人的从来不是怎么写对第一个 <code>colspan，而是改完第三处rowspan后，忘了第二行原本就少了一个<td>，结果整个表格在 Safari 和打印预览里突然错一格——这种问题没法靠 DevTools 实时看出来，得靠手动数格子。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
