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

colspan 和 rowspan 的本质区别在哪

它们不是“合并”单元格，而是让一个 或 占据多个逻辑列或行的位置。浏览器渲染时自动跳过被占据的格子，所以看起来像“合并”了——但 DOM 结构里依然只有这一个单元格元素。

关键判断依据：colspan 控制横向扩展（向右占位），rowspan 控制纵向扩展（向下占位）。两者可同时用，但必须确保整行/整列的单元格数加起来一致，否则表格结构会错乱。

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

常见错位现象和修复方法

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

• 检查每一行的 + 总“列宽”是否等于表头定义的列数（比如表头有 4 列，那每行所有 colspan 值加起来必须是 4）
• 使用 rowspan 时，被跨越的后续行中，对应列位置不能出现任何 ，否则会强行插入新单元格，破坏纵向对齐
• Chrome DevTools 的 Elements 面板里右键表格 → “Edit as HTML”，临时删掉某些 看是否恢复整齐，能快速定位多写的单元格

  实际场景中的写法示例

  比如做一个带分组标题的统计表：

  

  Wechat Article Html

  将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

  下载

  Q1		Q2
  收入	支出	收入	支出
  12000	8500	13200	9100
  年度小计	20500	22300
  	17600	18200

  注意最后一组： 占了两行第一列，所以第二行的 里不能再写第一个 ，否则就变成 3 列了。

  容易被忽略的兼容性和语义问题

  视觉上合并了，但屏幕阅读器仍按原始行列结构读取，rowspan 跨越多行时，若中间某行缺失 ，会导致无障碍访问混乱。

  • 如果只是为样式对齐，优先考虑 CSS Grid 或 Flex 布局，而非滥用 rowspan/colspan
  • 导出 Excel 时，多数库（如 SheetJS）能正确识别 rowspan/colspan，但部分老版本 IE 兼容模式下 rowspan 值大于 1 可能渲染异常
  • 动态生成表格时，别用 JS 拼接字符串硬写 rowspan，先算好每行应有多少单元格，再决定是否插入带 rowspan 的单元格，否则极易漏删后续行中的对应

    真正麻烦的从来不是怎么写这两个属性，而是改别人留下的表格时，发现 rowspan 和 colspan 交错嵌套，又没注释，得一行行数格子才能看懂原意。

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