colspan和rowspan必须直接写在<td>或<th>标签内且值为正整数；colspan="n"表示向右占满n列，需确保该行总列数匹配；rowspan="n"表示向下锁定n行该列位置，后续行<td>数量须减去已被占用的列数；二者共用时须删除被覆盖区域的所有<td>，并严格维护行列总数恒定。
colspan 和 rowspan 必须直接写在 <td> 或 <th> 标签里，值只能是正整数（如 colspan="2"），写成 colspan="2px" 或 colspan="two" 会完全失效。
colspan="n" 是怎么算列数的
它表示「这个单元格向右占满 n 列」，所在行其余单元格的列宽总和必须补足表格总列数。比如总列数是 5，你在第一个位置写了 colspan="3"，那这行后面就只能再放 2 个 <td>（或 1 个 colspan="2"，或 1 个 colspan="1" + 1 个 colspan="1"）。
- 常见错误：某行写了
colspan="4"，又额外加了 3 个<td>，结果浏览器强行补空格或错位渲染 - 表头合并时，
<th>的colspan要和下层<tr>中实际<th>/<td>数量对得上，否则scope或屏幕阅读器会读错 - 不要用
colspan去“对齐文字”或“撑宽某列”——那是 CSS 的事，硬用只会让结构脆弱
rowspan="n" 容易导致 tbody 错位的原因
rowspan 不是“画一个高框”，而是“从当前行起，向下锁定 n 行中该列的位置”。后续每行的 <td> 数量 = 总列数 − 当前列已被上层 rowspan 占用的列数。
- 典型翻车现场：
<tr><td rowspan="3">A</td><td>B</td></tr>，接下来两行如果还写满 2 个<td>，就会多出一列，浏览器自动补空但 JS 拿row.cells会报undefined - 动态插入行（如用 JS
insertRow()）时，别假设已有rowspan会自动适配——它不会重算，只会让新行结构错乱 - 打印或 PDF 导出时错行，大概率是
rowspan后某行少写了<td>，视觉上看不出，但渲染引擎已按矩阵逻辑补位
同时用 colspan 和 rowspan 时最常漏掉的三件事
二维合并不是简单叠加属性，而是定义一个矩形区域的左上角起点。一旦设了 rowspan="2" colspan="3"，就意味着这个单元格覆盖 2 行 × 3 列共 6 个原始格子。
- 被覆盖区域内的其他
<td>必须全部删掉——不能留空标签，也不能用<td></td>占位 - 同一行里，若某个
<td rowspan="2">已占第 1 列，那它右边的<td colspan="3">就只能从第 2 列开始算起，总列数仍要对齐 - 响应式场景下，
colspan/rowspan在小屏上不会折行或重组，只会横向溢出；真要兼容移动端，优先考虑用display: grid或卡片堆叠，而不是硬撑表格结构
真正难的不是写对属性，而是维护行列总数恒定——每次改一个 rowspan，都要顺手检查下面两行的 <td> 数；每次加 colspan，都得数清楚这行还剩几列可填。稍一疏忽，错位就藏在看似正常的渲染里。
