colspan和rowspan定义单元格在表格矩阵中占据的逻辑位置，非样式控制；每行colspan总和须等于总列数，rowspan要求后续行对应列留空，二者共用时需删除被覆盖的所有单元格。
colspan 和 rowspan 不是“加宽”或“拉高”，而是定义单元格在表格矩阵中占据的逻辑位置——算错一个数，整行结构就塌。
colspan="n" 怎么算列数？必须对齐总列数
它表示这个 <td> 向右占满 <code>n 列，不是“多加 2 像素”。关键约束是：每行所有 <td> 和 <code><th> 的 colspan 值加起来，必须等于该表的总列数（通常由第一行的 <code><th> 数量决定）。<ul>
<li>
<code><tr>
<th colspan="3">标题</th>
<th>A</th>
<th>B</th>
</tr> ✅（3+1+1=5）
<tr>
<th colspan="3">标题</th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr> ❌（3+1+1+1=6），浏览器会丢弃最后一个或补空，row.cells 可能返回 undefined
colspan 去“撑开某列宽度”——那是 width 或 grid-column 的事，硬用会让 JS 拿不到单元格、打印导出错位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="2" colspan="3"，就等于覆盖 2 行 × 3 列 = 6 个原始格子。
- 被覆盖区域内的所有
<td> 必须全部删掉——不能留空标签，也不能用 <code><td></td>占位 - 同一行里，若
<td rowspan="2"> 占了第 1 列，那它右边的 <code><td colspan="3"> 就只能从第 2 列开始算起，整行 colspan 总和仍得对齐总列数 <li>嵌套合并前建议先画网格草图，标出哪些格子被合并，再逐行填充；别指望浏览器“自动理解”，它只按规则硬解析</li> <p>最常被忽略的一点：这些属性只影响表格的语义结构，不负责样式对齐。一旦写错，浏览器不会报错，但屏幕阅读器读错表头、JS 拿不到单元格、React/Vue 渲染 tbody 错位——问题往往出现在上线后导出 PDF 或无障碍测试阶段，而不是开发预览时。</p> </td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
