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)）全都会失效——问题不在视觉，而在底层网格坐标已经偏了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！