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