合并单元格需用rowspan（跨行）和colspan（跨列），均写在<td>或<th>内；rowspan="N"要求后续N−1行同列位置彻底删除<td>/<th>，colspan="M"仅影响当前行；二者可共用，但须注意语义、动态生成逻辑及CSS兼容性。
直接说结论：合并行用 rowspan，合并列用 colspan，两者都必须写在 <td> 或 <th> 标签里，且后续对应位置的单元格要主动「不写」，否则表格会错位。
rowspan="N" 怎么写才让单元格真正跨 N 行
它不是“拉伸”当前单元格，而是告诉浏览器：“这个单元格占满当前行 + 接下来 N−1 行的同一列位置”。所以关键动作是：在接下来的 N−1 行中，那一列的位置必须完全不出现 <td> 或 <th>。
- 写
rowspan="3"后，后面两行同一列不能再有<td>—— 不是设为空、不是加 - 如果表格有 4 行，想让第一行第一个单元格跨满，就写
rowspan="4"，且第 2、3、4 行的第一个位置都不写<td> - 常见错误：写了
rowspan="2"，但第二行还留着一个<td>，结果渲染出两列错位，甚至文字被遮盖 - 注意
border-collapse: collapse必须加在 CSS 里，否则跨行单元格上下边框会重复显示，看起来像加粗或断开
colspan="M" 合并同一行里的多个列
colspan 比 rowspan 直观：它只影响当前这一行，把 M 个横向相邻的单元格“压成一个”。不需要删其他行的任何东西，只要保证当前行总 <td> 数量对得上即可。
- 一行原本该有 5 个
<td>，若第一个写colspan="2"，那这一行只需再写 4 个单元格（因为第一个已占两列），总数仍是 5 列 - 可以和
rowspan同时用，但要注意：先按rowspan留出纵向空间，再在剩余列里用colspan布局横向跨度 - 不要对
<th>乱用colspan却不配scope属性——屏幕阅读器可能无法正确关联表头与数据单元格
动态生成表格时，rowspan 容易漏掉什么逻辑
服务端模板或前端 JS 拼接表格时，不能靠“值相等就合并”，必须满足两个条件：值相同 + 行连续。否则会跨组合并，破坏语义。
立即学习“前端免费学习笔记（深入）”；
- 统计逻辑要从第一行开始遍历，遇到相同值就计数；一旦值变化，就把计数写进第一行的
rowspan，然后重置计数器 - Vue/React 中别在
v-for或map里临时判断是否渲染某列 —— 容易漏掉“该跳过”的<td>，导致 DOM 多出一列 - JS 动态改
rowspan属性后，浏览器不会自动删掉已被跨过的<td>，必须手动remove()对应节点，否则视觉重复 - 如果用了
display: grid或flex模拟表格布局，rowspan和colspan完全无效 —— 它们只在原生<table>结构中起作用
最常被忽略的一点：合并后的单元格仍参与表格列宽计算，但内容垂直居中默认依赖 vertical-align: middle；如果设了 top 或 bottom，多行合并后文字会贴顶或悬空，看起来像没对齐。
