HTML表格通过rowspan和colspan合并单元格以构建统计表结构，需严格按行列逻辑编写并删除被覆盖单元格，否则导致渲染错位。
HTML表格本身不“合并数据”，只合并视觉和语义上的单元格位置。所谓“复杂表单的数据统计行列”，本质是用 rowspan 和 colspan 构建清晰的统计表结构，让标题、分类、汇总等信息在逻辑上对齐，方便人眼阅读和屏幕阅读器理解。
先理清统计表的典型结构
常见统计表往往包含：顶部总标题、分组标题（横跨多列）、左侧维度标签（纵跨多行）、具体数值单元格。例如“各地区季度销售额”表中：
- 第一行是总标题，colspan="4" 覆盖全部列
- 第二行是“Q1”“Q2”“Q3”“Q4”四个季度列头
- 第一列是“华东”“华北”“华南”等地区名，每个需 rowspan="4"（对应4个季度）
- 中间区域是纯数值，每格一个
<td>
按步骤写，避免错位
不要边写边猜，而是按逻辑顺序操作：
- 画草图标行列数：先手绘或脑中明确整张表最大列数（如5列）、最大行数（如6行），标出哪些格子要合并
-
从第一行开始逐行写：第一行有
<th colspan="5">2026年销售统计</th>→ 这行就只有1个单元格，贡献5列 -
遇到 rowspan，立刻“锁住”下方行：比如
<td rowspan="3">华东</td>写完后，接下来两行同一列位置必须完全留空，不能写<td></td>，也不能写注释 -
每行手动验算列总数：把该行所有
colspan值加起来，必须等于你设定的总列数（比如5）。若某行写了colspan="2"+ 三个普通<td>，总和是5，才对
同时用 rowspan 和 colspan 的关键点
比如左上角单元格要覆盖“地区 × 季度”的汇总区（2列×3行），不是加两个属性就完事：
立即学习“前端免费学习笔记（深入）”；
- 只在左上角那个
<th>上写rowspan="3" colspan="2" - 它正右方、正下方、右下方共 5 个原本存在的单元格必须全部删除（不是留空，不是注释，是彻底移除标签）
- 否则浏览器会当成多余单元格渲染，导致整行偏移、边框断裂、JS 获取
row.cells时返回undefined
验证是否写对的实操方法
光看页面效果不可靠，得查底层结构：
- 打开 Chrome DevTools → Elements 面板 → 找到
<table>→ 右键 → “Edit as HTML” - 观察每行
<tr>内的<td>/<th>数量和colspan值，逐行加总 - 对任意带
rowspan="n"的单元格，向下数n−1行，确认对应列位置没有出现任何<td>或<th> - 导出 PDF 或打印预览时错位？90% 是这里漏删了被覆盖的单元格
