html表格中colspan和rowspan必须严格遵循二维网格规则：colspan="n"需删同一行后续n−1个单元格，rowspan="m"要求后续m−1行同列留空；非矩形合并不支持，错误使用将导致渲染错位且无警告。

colspan="n" 必须删掉同一行中 n−1 个 <td> 或 <code><th> <p>横向合并不是“让单元格变宽”，而是它占了原本该存在的 n 个位置，所以这一行后续只能再写（总列数 − n）个单元格。漏删就会导致列数膨胀，下一行对不齐。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8272" title="anything-to-html"><img src="https://img.php.cn/upload/skill/000/000/081/179195588450431.jpg" alt="anything-to-html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="overflowclass">anything-to-html</a> <p class="overflowclass">将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。</p> </div> <a rel="nofollow" href="/xiazai/skill8272" title="anything-to-html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <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) =&gt; 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 列？没有标准属性支持。

• 变通方案只有两种：拆成多个嵌套 <table>（语义弱、维护难），或放弃 <code><table> 改用 CSS Grid（<code>grid-row: span 2 + grid-column: span 3）
• 用 CSS 强行“视觉合并”（比如隐藏边框、绝对定位）会破坏可访问性、打印样式和屏幕阅读器识别
• 动态生成场景（如 Vue/React 渲染表格）更要提前算好 rowspan 值，不能靠 DOM 检测后补 —— 浏览器解析顺序决定跨行占用不可逆
真正容易被忽略的是：浏览器不会报错，也不会警告你列数不一致。它只是默默渲染错位，而开发者工具里看到的 DOM 结构，可能和你想象中的“表格样子”根本不是一回事。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！