HTML表格中colspan和rowspan必须严格遵循二维网格规则：colspan="n"需删同一行后续n−1个单元格，rowspan="m"要求后续m−1行同列留空；非矩形合并不支持，错误使用将导致渲染错位且无警告。
colspan="n" 必须删掉同一行中 n−1 个 <td> 或 <code><th>
<p>横向合并不是“让单元格变宽”，而是它占了原本该存在的 n 个位置，所以这一行后续只能再写（总列数 − n）个单元格。漏删就会导致列数膨胀，下一行对不齐。</p>
<ul>
<li>正确写法：<code><tr>
<td colspan="2">姓名</td>
<td>年龄</td>
</tr> → 这行共 3 列宽度
<tr>
<td colspan="2">姓名</td>
<td>张三</td>
<td>李四</td>
<td>年龄</td>
</tr> → 实际 5 列，但逻辑上只该有 4 列，第二行会偏移colspan 值必须是纯正整数，colspan="2px" 或 colspan="two" 会被浏览器完全忽略rowspan="m" 要求后续 m−1 行同列位置彻底留空
纵向合并的源头必须在起始行的目标 <td> 上声明，且被跨过的那些行、同一列位置，不能出现任何 <code><td> 或 <code><th> —— 连空标签都不行，否则浏览器会把它当新列渲染。
<ul>
<li>正确写法：<code><tr>
<td rowspan="2">信息</td>
<td>姓名</td>
</tr>
<tr><td>张三</td></tr>
<tr>
<td rowspan="2">信息</td>
<td>姓名</td>
</tr>
<tr>
<td>信息</td>
<td>张三</td>
</tr> → 第二行第一个 <td> 多余，表格直接裂开
<li><code><thead> 和 <code><tbody> 是独立容器，但列坐标必须对齐：如果表头用了 <code>rowspan="3"，那 <tbody> 前两行对应列也得跳过
<h3>同时用 <code>colspan 和 rowspan 时，行列总数都要校验
一个 <td rowspan="2" colspan="3"> 覆盖的是 2 行 × 3 列的矩形区域，这个区域内所有其他位置都不能再出现 <code><td>。这意味着你既要检查每行真实列数一致，也要确认每列总行数没被意外撑开。
<ul>
<li>验证每行列数是否一致，可用这行 JS 快速验算：<pre class="brush:php;toolbar:false;">Array.from(tr.children).reduce((s, el) => s + (el.colSpan || 1), 0)</pre></li>
<li>组合使用时，<code>colspan 和 rowspan 顺序无关，但位置必须严格对齐网格；手绘草图标出每个单元格的跨行列值，比边写边试更可靠
rowspan 和小 colspan，尤其在表头区域，容易导致 td:nth-child(n) 选择器失效合并非相邻或 L 形单元格？HTML 原生不支持
HTML 表格是严格二维网格模型，colspan 和 rowspan 只能定义连续矩形块。想合并第 1 行第 1 列和第 3 行第 4 列？没有标准属性支持。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 变通方案只有两种：拆成多个嵌套
<table>（语义弱、维护难），或放弃 <code><table> 改用 CSS Grid（<code>grid-row: span 2+grid-column: span 3） - 用 CSS 强行“视觉合并”（比如隐藏边框、绝对定位）会破坏可访问性、打印样式和屏幕阅读器识别
- 动态生成场景（如 Vue/React 渲染表格）更要提前算好 rowspan 值，不能靠 DOM 检测后补 —— 浏览器解析顺序决定跨行占用不可逆 真正容易被忽略的是：浏览器不会报错，也不会警告你列数不一致。它只是默默渲染错位，而开发者工具里看到的 DOM 结构，可能和你想象中的“表格样子”根本不是一回事。
