合并单元格需明确方向与布局，横跨用colspan、纵跨用rowspan，且必须删除被覆盖的单元格，否则导致dom失真、js读取异常及渲染错位。
合并四个单元格不是“选一个数填进去”那么简单——必须先明确方向（横跨还是纵跨）和布局（2×2？1×4？4×1？），否则 colspan 或 rowspan 值写对了，表格照样错位、DOM 失真、JS 读不到单元格。
合并同一行的4个单元格：用 colspan="4"，但必须删掉其余3个 <td>
<p>这是最常见也最容易翻车的场景。比如表头要写“总销售额”，它本该覆盖第1–4列：</p>
<pre class="brush:php;toolbar:false;"><tr>
<th colspan="4">总销售额</th>
</tr><tr>
<td>Q1</td>
<td>Q2</td>
<td>Q3</td>
<td>Q4</td>
</tr></pre>
<p>关键点：</p>
<ul><li>
<code>colspan="4" 必须写在 <th> 或 <code><td> 上，不能写在 <code><tr> 上
<li>这一行总共只能有1个单元格（因为 <code>colspan="4" 占满4列），不能再跟其他 <td> —— 否则浏览器会强行补空或丢弃，<code>row.cells.length 可能不等于预期值
合并同一列的4个单元格：用 rowspan="4"，后续3行对应列必须彻底留空
比如左侧“部门”栏要纵向贯穿4行：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<tr> <td rowspan="4">技术部</td> <td>张工</td> </tr><tr> <td>李工</td> </tr><tr> <td>王工</td> </tr><tr> <td>赵工</td> </tr>
注意：
-
rowspan="4"表示从当前行起，锁定该列位置共4行（含当前行），所以后面3行里，这个列位置不能出现任何<td> 或 <code><th> <li>如果某一行误写了 <code><td></td>占位，哪怕内容为空，也会破坏结构——DevTools 里边框断裂、row.cells[0]返回undefined就是典型信号 - 动态插入行时尤其危险：JS 插入新
<tr> 后，若没检查 <code>rowspan占位，立刻错位合并2行×2列的矩形区域：
colspan="2"和rowspan="2"同时用，且必须删光其余3个单元格这不是属性叠加，是二维坐标覆盖。例如左上角单元格要覆盖2×2区域：
<tr> <td rowspan="2" colspan="2">汇总</td> <td>时间</td> </tr><tr> <td>2024</td> </tr>
这里容易漏掉的是：被覆盖的另外3个位置（第1行第3列、第2行第1列、第2行第2列）一个都不能留
<td>，连空标签也不行。 <ul> <li>错误写法：<code><td></td>或注释占位 → DOM 结构已失真，React 渲染、PDF 导出都会错位 - 验证方法：在 Chrome DevTools 中右键表格 → “Edit as HTML”，手动删掉疑似多余的
<td>，看是否瞬间整齐 <li>每行实际渲染单元格数 = 表头总列数 − 当前已被上层 <code>rowspan占用的列数，必须逐行核对
真正麻烦的不是语法，而是合并后表格逻辑结构和视觉呈现的割裂——浏览器不报错，但 querySelector('table tbody tr') 拿到的行数、row.cells 的长度、甚至打印出来的 PDF，都可能和你看到的不一样。动手前先画草图，标出每个单元格的行列跨度，比反复刷新页面试错快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
