html表格合并单元格必须手动设置colspan和rowspan并同步删除被覆盖的td/th，漏删会导致错行错列；colspan="2"表示当前单元格占据2列，右侧对应数量的单元格须删除；rowspan="2"表示向下覆盖一行同列位置，下一行该列必须完全留空；二者同时使用时需按占位数精确删减周围单元格。
HTML 表格不能“选中两个单元格然后点合并”——所有合并都靠手动写 colspan 和 rowspan，并同步删掉被覆盖位置的 <td> 或 <code><th>，漏删一个就会错行错列。
<h3>colspan="2" 怎么横向合并同一行的两个单元格</h3>
<p>它不是让左边单元格“变宽”，而是告诉浏览器：“这个 <code><td> 占据当前行的 2 列位置，右边那列原本该有的 <code><td> 必须从代码里删掉”。
<ul><li>写 <code>colspan="2" 后，该行后续单元格数量要减 1：比如总列数是 4，<td colspan="2">A</td> 之后只能再写 2 个 <td>（不是 3 个）
<li>错误写法：<code><tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr> → 这行实际渲染出 5 列，下一行极易对不齐
colspan 值必须是正整数：colspan="2" ✅，colspan="2px" ❌，colspan="0" 在 HTML5 中被忽略rowspan="2" 怎么纵向合并上下两行的同一个单元格
它不是让单元格“拉高”，而是声明：“这个 <td> 向下覆盖下一行同列的位置，所以下一行这一列不能出现任何 <code><td> 或 <code><th>”。
<ul>
<li>如果 <code><td rowspan="2">Name</td> 在第一行，第二行同一列**必须完全留空**，不能写 <td></td>，也不能写 <td>Bob</td>
<thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐：若表头用了 <code>rowspan="2"，<tbody> 第一行对应列也得跳过
<li>常见错误现象：某列突然多出空白、右侧内容整体右移、边框断裂——基本就是下一行多写了一个 <code><td>
<h3>rowspan 和 colspan 同时用，怎么避免结构崩塌</h3>
<p>一个单元格同时设 <code>rowspan="2" colspan="3"，等于占了 2×3=6 个原始格子，周围所有行和列都要按这个“吞掉”的数量做减法。
- 该单元格所在行：右侧紧邻的 2 个
<td> 必须删掉（因 <code>colspan="3"已占满 3 列） - 它下方那一行：对应 3 列位置全部留空，一个
<td> 都不能出现 <li>验证是否正确：运行后用 JS 执行 <code>Array.from(document.querySelectorAll('tr')[0].children).reduce((s, el) => s + (el.colSpan || 1), 0)，确保每行返回值一致 - 别指望靠 CSS 边框隐藏来“假装合并”——可访问性、打印、屏幕阅读器全会失效
最易被忽略的是：合并不是“加属性”，是“占位+删节点”。哪怕结构只差一个 <td>，表格就不再是一个语义清晰的网格，而是一堆错位的盒子。</td>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
