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