HTML表格合并单元格必须用colspan/rowspan显式声明并同步删除被覆盖的单元格，否则结构错乱；colspan="2"占用当前列及右侧一列，该行对应位置不可再写td；rowspan="2"时下一行同列位置必须完全留空。
HTML 表格不能“选中两个单元格然后合并”，必须用 colspan 或 rowspan 显式声明跨列/跨行，并同步删掉被覆盖位置的其他 <td> 或 <code><th>，否则结构必然错乱。
<h3>colspan="2" 后为什么表格错位了</h3>
<p>因为 <code>colspan="2" 不是“加宽当前单元格”，而是“占用当前列 + 右侧一列”，所以那一行里，原本该出现在第二列的位置不能再写任何 <td>。
<ul>
<li>错误写法：<code><tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr> → 这行实际有 5 列（2+1+1+1），但视觉上第一格占两列，后三格挤在右侧，下一行极易对不齐
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr> → 总列数 = 2+1+1 = 4，匹配预期Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)，确保每行结果一致rowspan="2" 下一行同列还能不能写 <td>
<p>不能。写了 <code>rowspan="2"，就等于告诉浏览器：“这个格子向下吞掉正下方那一格”，所以下一行、同一列位置必须彻底留空——不是写 <td></td>，是连标签都不能出现。
- 反例：
<tr>
<td rowspan="2">Name</td>
<td>Alice</td>
</tr>
<tr>
<td>Name</td>
<td>Bob</td>
</tr> → 第二行第一个 <td> 是多余的，表格会裂开
<li>正确写法：第二行去掉第一个 <code><td>，只保留 <code><td>Bob</td>
<thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐；如果表头用了 <code>rowspan，<tbody> 第一行对应列也得跳过
<h3>同时用 colspan 和 rowspan 容易漏掉什么</h3>
<p>二维合并（比如 <code>rowspan="2" colspan="2"）会让行列坐标同时偏移，稍不注意整张表就错位，而且这种错位浏览器不报错，只在渲染时悄悄失准。
html-to-pptx-converter
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
下载
立即学习“前端免费学习笔记（深入）”；
- 必须双重校验：先算每行总列数是否一致，再检查每列在各
<tr> 中是否被正确跳过（尤其跨多行时，中间行该列必须全空）
<li>调试技巧：打开开发者工具，选中合并单元格，看 box model 是否真正跨行跨列；再手动展开 DOM，确认下一行同列位置确实没有节点</li>
<li>建议先手绘网格草图，标出每个单元格的起始行/列和跨度，再写代码；别靠“试出来”</li>
<p>最常被忽略的是：合并不是样式操作，而是语义重构。漏删一个 <code><td>，可访问性、打印输出、JS 选择器（如 <code>td:nth-child(3)）全都会失效——问题不在视觉，而在底层网格坐标已经偏了。
<tr>
<td rowspan="2">Name</td>
<td>Alice</td>
</tr>
<tr>
<td>Name</td>
<td>Bob</td>
</tr> → 第二行第一个 <td> 是多余的，表格会裂开
<li>正确写法：第二行去掉第一个 <code><td>，只保留 <code><td>Bob</td>
<thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐；如果表头用了 <code>rowspan，<tbody> 第一行对应列也得跳过
<h3>同时用 colspan 和 rowspan 容易漏掉什么</h3>
<p>二维合并（比如 <code>rowspan="2" colspan="2"）会让行列坐标同时偏移，稍不注意整张表就错位，而且这种错位浏览器不报错，只在渲染时悄悄失准。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 必须双重校验：先算每行总列数是否一致，再检查每列在各
<tr> 中是否被正确跳过（尤其跨多行时，中间行该列必须全空） <li>调试技巧：打开开发者工具，选中合并单元格，看 box model 是否真正跨行跨列；再手动展开 DOM，确认下一行同列位置确实没有节点</li> <li>建议先手绘网格草图，标出每个单元格的起始行/列和跨度，再写代码；别靠“试出来”</li> <p>最常被忽略的是：合并不是样式操作，而是语义重构。漏删一个 <code><td>，可访问性、打印输出、JS 选择器（如 <code>td:nth-child(3)）全都会失效——问题不在视觉，而在底层网格坐标已经偏了。
