html表格无法直接合并任意两个单元格，必须用colspan或rowspan显式声明跨列/跨行，并同步删除对应位置的td/th，否则结构错乱；仅支持矩形区域合并，非相邻或l形单元格无法合并。
HTML 没有“直接合并两个任意单元格”的语法，必须靠 colspan 或 rowspan 显式声明跨列/跨行，并同步删减对应位置的其他 <td> 或 <code><th> —— 否则表格结构必然错乱。
<h3>横向合并相邻两列的单元格（colspan）</h3>
<p>适用于同一行中左右紧邻的两个 <code><td> 或 <code><th> 合并为一个宽单元格。
<ul>
<li>在左侧单元格上加 <code>colspan="2"，表示它横跨 2 列
<td> 必须删除，不能留空或写成 <code><td></td>
<td colspan="2"> 占了前两列，则后续只能再写 2 个单元格（不是 3 个）
<li>错误示例：<code><tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr> → 实际列数变成 5，下一行极易对不齐纵向合并上下两行的单元格（rowspan）
适用于同一列中上下紧邻的两个 <td> 合并为一个高单元格。
<ul>
<li>在上方单元格加 <code>rowspan="2"，表示它向下占满两行高度
<td> 或 <code><th>
<li><code><thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐：如果表头用了 <code>rowspan，<tbody> 第一行对应列也得跳过
<li>典型反例：<code><tr>
<td rowspan="2">Name</td>
<td>Alice</td>
</tr>
<tr>
<td>Name</td>
<td>Bob</td>
</tr> → 第二行多写了一个 <td>，表格直接裂开
<h3>合并非相邻或 L 形区域的两个单元格？不行</h3>
<p>HTML 表格是严格网格模型，<code>colspan 和 rowspan 只能定义矩形区域（即“覆盖 N 列 × M 行”的连续块），无法选中任意两个散点单元格做逻辑合并。
- 想让第 1 行第 1 列和第 2 行第 3 列合并？没有标准 HTML 属性支持
- 变通做法只有两种：重构表格结构（比如拆成多个嵌套
<table>），或放弃语义化改用 CSS Grid / Flex 布局模拟视觉效果 <li>用 CSS 强行“视觉合并”（如隐藏边框、绝对定位）会破坏可访问性、打印样式和屏幕阅读器识别</li> <h3>验证合并是否正确的最简方法</h3> <p>别只靠肉眼检查，用 JS 快速验算每行真实列数：</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <pre class="brush:php;toolbar:false;">Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)</pre> <p>对每个 <code><tr> 执行这行代码，结果必须全部相等；否则就是漏删单元格或 <code>colspan/rowspan写错了位置。最容易被忽略的点：合并不是“加属性”，而是“占位+删格”——浏览器不会帮你补逻辑，它只忠实地渲染你写的标签数量和属性值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
