colspan控制单元格横向跨列（向右占位），rowspan控制纵向跨行（向下占位）；二者非真正合并单元格，而是使单个td/th占据多个逻辑行列位置，DOM中仍为一个元素。

colspan 和 rowspan 的本质区别在哪

它们不是“合并”单元格，而是让一个 <td> 或 <code><th> 占据多个逻辑列或行的位置。浏览器渲染时自动跳过被占据的格子，所以看起来像“合并”了——但 DOM 结构里依然只有这一个单元格元素。 <p>关键判断依据：<code>colspan 控制横向扩展（向右占位），rowspan 控制纵向扩展（向下占位）。两者可同时用，但必须确保整行/整列的单元格数加起来一致，否则表格结构会错乱。

• colspan="2"：该单元格横跨 2 列，它右边那一格在 HTML 中必须省略，否则会多出一列
• rowspan="3"：该单元格向下延伸占满 3 行，那么它下方两行对应列位置的 <td> 必须删掉，否则会撑开额外行高 <li>数值必须是正整数，<code>colspan="0" 或 rowspan="0" 在 HTML5 中无效，会被忽略

常见错位现象和修复方法

最典型的问题是：表格某一行突然变短、文字挤在一起、边框断裂、或控制台报 Table row has fewer cells than required —— 这基本都是 colspan/rowspan 数值没对齐导致的。

• 检查每一行的 <td> + <code><th> 总“列宽”是否等于表头定义的列数（比如表头有 4 列，那每行所有 <code>colspan 值加起来必须是 4）
• 使用 rowspan 时，被跨越的后续行中，对应列位置不能出现任何 <td>，否则会强行插入新单元格，破坏纵向对齐 <li>Chrome DevTools 的 Elements 面板里右键表格 → “Edit as HTML”，临时删掉某些 <code><td> 看是否恢复整齐，能快速定位多写的单元格 <h3>实际场景中的写法示例</h3> <p>比如做一个带分组标题的统计表：</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10595" title="htmlppt.skill"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20d79f23518.jpg" alt="htmlppt.skill" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10595" title="htmlppt.skill">htmlppt.skill</a> <p>把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。</p> </div> <a href="/xiazai/skill10595" title="htmlppt.skill" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <pre class="brush:php;toolbar:false;">&lt;table border=&quot;1&quot;&gt; &lt;tr&gt; &lt;th colspan=&quot;2&quot;&gt;Q1&lt;/th&gt; &lt;th colspan=&quot;2&quot;&gt;Q2&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;收入&lt;/th&gt; &lt;th&gt;支出&lt;/th&gt; &lt;th&gt;收入&lt;/th&gt; &lt;th&gt;支出&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;12000&lt;/td&gt; &lt;td&gt;8500&lt;/td&gt; &lt;td&gt;13200&lt;/td&gt; &lt;td&gt;9100&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th rowspan=&quot;2&quot;&gt;年度小计&lt;/th&gt; &lt;td&gt;20500&lt;/td&gt; &lt;td&gt;22300&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;17600&lt;/td&gt; &lt;td&gt;18200&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;</pre> <p>注意最后一组：<code><th rowspan="2"> 占了两行第一列，所以第二行的 <code><tr> 里不能再写第一个 <code><td>，否则就变成 3 列了。 <h3>容易被忽略的兼容性和语义问题</h3> <p>视觉上合并了，但屏幕阅读器仍按原始行列结构读取，<code>rowspan 跨越多行时，若中间某行缺失 <th>，会导致无障碍访问混乱。 <ul> <li>如果只是为样式对齐，优先考虑 CSS Grid 或 Flex 布局，而非滥用 <code>rowspan/colspan
• 导出 Excel 时，多数库（如 SheetJS）能正确识别 rowspan/colspan，但部分老版本 IE 兼容模式下 rowspan 值大于 1 可能渲染异常
• 动态生成表格时，别用 JS 拼接字符串硬写 rowspan，先算好每行应有多少单元格，再决定是否插入带 rowspan 的单元格，否则极易漏删后续行中的对应 <td> <p>真正麻烦的从来不是怎么写这两个属性，而是改别人留下的表格时，发现 <code>rowspan 和 colspan 交错嵌套，又没注释，得一行行数格子才能看懂原意。