HTML表格合并单元格需严格遵循“占位+删除”原则：colspan="n"须删n−1个td/th，rowspan="m"须在后续m−1行同列留空，否则导致错行、边框断裂、屏幕阅读器误读；每行真实列数须一致，且嵌套时需手绘网格校验坐标。
HTML 表格合并单元格不是加个 colspan 或 rowspan 就能自动对齐的事，漏删对应位置的 <td> 或 <code><th>，表格立刻错行、边框断裂、屏幕阅读器读错结构。
<h3>colspan="n" 意味着同一行少写 n−1 个单元格</h3>
<p>横向合并的本质是“占位 + 删除”：浏览器按你写的 <code><td> 数量逐列排布，不会跳过被 <code>colspan 覆盖的位置。
-
colspan="3"不是“让这个单元格变宽”，而是它覆盖了本该存在的 3 个独立单元格，所以这一行后续只能再写 总列数 − 3 个单元格 - 常见错误：
<tr> <td colspan="3">A</td> <td>B</td> <td>C</td> <td>D</td> </tr>→ 这行实际有 6 列（3+1+1+1），但逻辑列数若为 5，就会导致下一行对不齐 - 验证方法：用
Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)计算每行真实列数，确保所有<tr> 结果一致 <li>值必须是纯正整数，<code>colspan="2px"或colspan="two"会被浏览器忽略 - 例如：某
<th> 同时设 <code>colspan="2"和rowspan="3"，那它覆盖的是一块 3 行 × 2 列的矩形区域，区域内所有其他<td>/<code><th> 都得删干净 <li>容易被忽略的是嵌套结构——比如在 <code><tbody> 里某行用了 <code>colspan，而<thead> 又用了 <code>rowspan，二者叠加会让列基准偏移 - 安全做法：先手绘网格草图，标出每个单元格的起始行列坐标，再填 HTML；复杂场景优先考虑用
display: grid替代，而非硬啃rowspan+colspan
rowspan="m" 要求后续 m−1 行同列位置彻底留空
纵向合并最常踩坑的地方，就是写了 rowspan 却还在下一行补了 <td> —— 浏览器会把它当新列渲染，整行右移。
<ul><li>
<code>rowspan="2" 表示本格向下吞掉正下方那一格，所以**下一行、同一列不能再出现任何 <td> 或 <code><th>**
<li><code><thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐：如果 <code><thead> 里某 <code><th> 设了 <code>rowspan="3"，那 <tbody> 前两行的对应列也必须跳过
<li>典型反例：<code><tr>
<td rowspan="2">Name</td>
<td>Alice</td>
</tr>
<tr>
<td>Name</td>
<td>Bob</td>
</tr> → 第二行第一个 <td> 多余，直接错位
<li>调试技巧：开发者工具中选中该单元格，看 box model 是否跨行；再检查 DOM 中下一行同列是否真的没节点</li>
<h3>同时用 colspan 和 rowspan 时，行列总数必须双重校验</h3>
<p>组合使用时，既要保证每行总列数一致，也要保证每列总行数一致，否则表头和数据列会脱节，CSS 选择器（如 <code>td:nth-child(3)）可能失效。
立即学习“前端免费学习笔记（深入）”；
真正麻烦的不是属性本身，而是合并后表格仍要满足语义完整性与可访问性——被删掉的单元格位置，不能靠 CSS 视觉模拟补上，也不能指望屏幕阅读器“猜”你本意。手动删节点、逐行校验、草图先行，这三步跳不过。
