colspan和rowspan是表格结构指令而非视觉修饰，需严格匹配逻辑列数与网格占用：colspan="n"占n列，整行值之和须等于首行定义的列总数；rowspan="n"锁定n行位置，后续对应单元格必须删除，否则导致错位、漏格或重叠。
colspan 和 rowspan 不是“让格子变宽变高”的视觉修饰，而是直接参与表格网格计算的结构指令——填错一个值，后续所有行都会偏移，但浏览器不报错，只默默渲染出错位、漏格或重叠。
colspan="n" 怎么算对列数？
它表示这个 <td> 向右“吃掉” n−1 个相邻单元格，自身占满 n 列。整行所有单元格的 colspan 值之和，必须等于该表逻辑列总数（通常由第一行 <th> 数量决定）。
-
<th colspan="2">收入</th><th>成本</th><th>利润</th>→ 总列数 = 2 + 1 + 1 = 4 ✅ -
<th colspan="2">收入</th><th>成本</th><th>利润</th><th>税率</th>→ 总列数 = 2 + 1 + 1 + 1 = 5 ❌（若首行定义为 4 列，这一行就超了） - 别用
colspan去“撑宽度”或“居中标题”——那是width或 CSS 的事；它只管“占几列”
rowspan="n" 为什么下一行不能写？
rowspan 不是画个高框，而是锁定位置：设 rowspan="3"，等于宣布“从当前行起，接下来两行里，这一列的位置归我了”。浏览器会在内部网格中把这 3×1 区域标记为已占用，后续行若再写 <td>，就会被挤到右边或丢弃。
- 正确：
<tr><td rowspan="2">张三</td><td>数学</td></tr><tr><td>英语</td></tr> → 第二行没写第一个 <td>，留空
- 错误：
<tr><td rowspan="2">张三</td><td>数学</td></tr><tr><td>张三</td><td>英语</td></tr> → 第二行重复写了第一列，导致“张三”错位、“英语”跳到第三列
- 调试时打开开发者工具，选中单元格看
grid-row 范围，能立刻验证是否跨行生效
colspan 和 rowspan 一起用，哪些格子必须删干净？
一个 <td rowspan="2" colspan="3"> 占据的是二维矩形区域（2 行 × 3 列 = 6 个逻辑格子），其中只有左上角那个写属性，其余 5 个位置——包括同一行右侧两个、下一行对应三列——全部必须彻底删除，不能留空 <td></td>，也不能用注释占位。
立即学习“前端免费学习笔记（深入）”；
- 典型翻车点：删了下一行的
<td>，却忘了同一行右侧还该少写两个 <td>
- 嵌套结构（如财报三级表头）建议先手绘网格草图，标出每行实际需几个逻辑单元格，再反推哪几个位置要合并
- 用
document.querySelectorAll('tr') 遍历每行，检查 row.cells.length 是否一致；不一致说明某处漏删或误加
真正难的不是写对第一个 colspan，而是改完第三处 rowspan 后，忘了第二行原本就该少一个 <td>——这种错位肉眼难察觉，但导出 Excel 或屏幕阅读器读取时会直接失效。
rowspan 不是画个高框，而是锁定位置：设 rowspan="3"，等于宣布“从当前行起，接下来两行里，这一列的位置归我了”。浏览器会在内部网格中把这 3×1 区域标记为已占用，后续行若再写 <td>，就会被挤到右边或丢弃。
- 正确：
<tr><td rowspan="2">张三</td><td>数学</td></tr><tr><td>英语</td></tr>→ 第二行没写第一个<td>，留空 - 错误：
<tr><td rowspan="2">张三</td><td>数学</td></tr><tr><td>张三</td><td>英语</td></tr>→ 第二行重复写了第一列，导致“张三”错位、“英语”跳到第三列 - 调试时打开开发者工具，选中单元格看
grid-row范围，能立刻验证是否跨行生效
colspan 和 rowspan 一起用，哪些格子必须删干净？
一个 <td rowspan="2" colspan="3"> 占据的是二维矩形区域（2 行 × 3 列 = 6 个逻辑格子），其中只有左上角那个写属性，其余 5 个位置——包括同一行右侧两个、下一行对应三列——全部必须彻底删除，不能留空 <td></td>，也不能用注释占位。
立即学习“前端免费学习笔记（深入）”；
- 典型翻车点：删了下一行的
<td>，却忘了同一行右侧还该少写两个<td> - 嵌套结构（如财报三级表头）建议先手绘网格草图，标出每行实际需几个逻辑单元格，再反推哪几个位置要合并
- 用
document.querySelectorAll('tr')遍历每行，检查row.cells.length是否一致；不一致说明某处漏删或误加
真正难的不是写对第一个 colspan，而是改完第三处 rowspan 后，忘了第二行原本就该少一个 <td>——这种错位肉眼难察觉，但导出 Excel 或屏幕阅读器读取时会直接失效。
