rowspan和colspan是决定表格结构的关键属性，非装饰性：rowspan使单元格向下跨行并跳过后续行对应列位置，需留空；colspan向右跨列并计入当行总列数，须确保每行列数一致；二者叠加时占据二维空间，所有被占位置均不可重复填充。
rowspan 和 colspan 不是“加个属性就能自动对齐”的装饰性写法，而是直接参与表格结构计算的布局指令——写错一个值，整行或整列就错位，浏览器不会报错，但渲染结果会漏格、重叠或空白。
rowspan 怎么填才不跳行？
rowspan 表示当前单元格向下“占几行”，但关键点在于：它会**跳过后续 <tr> 中对应位置的 <code><td> 或 <code><th>**。也就是说，你设了 <code>rowspan="3"，后面两行里同一列就不能再放单元格，否则结构冲突。
- 正确做法：目标单元格（最上方那个）写
rowspan="N"，后续 N−1 行中，该列位置必须**完全留空**（不写<td>） <li>常见错误：<code><tr> <td rowspan="2">A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr>→ 这里第二行第一列写了<td>C</td>，和rowspan="2"冲突，C 会被挤到第二列，B/D 错位 - 调试技巧：用浏览器开发者工具选中单元格，看 computed 样式里
grid-row范围，能快速验证是否跨行生效 - 典型翻车场景：
<tr> <th colspan="2">标题</th> <th>姓名</th> <th>年龄</th> </tr>→ 这行实际占了 4 列，但colspan="2"后只写了两个独立<th>，等于共 3 个单元格，列数算成 2+1+1=4 ✅；但如果误写成 <code><th colspan="2">标题</th> <th>姓名</th> <th>年龄</th> <th>城市</th>，就变成 5 列，下一行按 4 列写就会偏移 - 建议：复杂表先手算首行 colspan 总和，作为基准列数，后续每行都按此总数校验
- 致命陷阱：合并区域的“右下角”位置容易被重复填充。例如
<td rowspan="2" colspan="2">X</td>占据 (0,0)(0,1)(1,0)(1,1)，那么第 1 行第 1 列、第 1 行第 2 列、第 2 行第 1 列、第 2 行第 2 列这四个位置都必须为空 - 真实案例：某报表表头先
colspan="3"写大标题，又在第二行左侧用rowspan="2"写“部门”，结果第二行右侧两个单元格被部门单元格“挡住”，渲染时消失不见 - 安全做法：画个草图标出所有合并格坐标，或者用
border-collapse: collapse+ 细边框实时预览结构
colspan 导致列数对不上怎么办？
colspan 是横向“吃掉”右边相邻单元格，所以它直接影响该行的总列数。比如一行原本该有 4 列，你在第一个 <td> 上写 <code>colspan="3"，那这一行就只剩 1 个单元格位置（3+1=4），不能再写第四个 <td>，否则就变成 5 列，下一行若没同步调整就会错列。
<ul>
<li>核心规则：每行所有 <code>colspan 值之和 + 未合并单元格数 = 该表定义的列总数（通常由第一行决定）
rowspan 和 colspan 一起用时最容易忽略什么？
二者叠加不是简单相乘，而是**空间占据叠加**：一个单元格同时设 rowspan="2" 和 colspan="3"，意味着它在二维网格中占据 2 行 × 3 列共 6 个逻辑位置，这些位置在后续行/列中全部不可再用。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
真正难的不是记住语法，而是每次写完都要反向推一遍：这个 rowspan="N" 会让接下来 N−1 行少几个格？这个 colspan="M" 让当前行多占了几列？表格结构一旦错位，视觉修复比重写还费劲。
