HTML表格中用colspan属性实现横跨多列、rowspan实现竖跨多行，二者均为原生HTML属性，值必须为纯正整数；可同时使用，但需严格匹配行列总数以避免结构错位。
HTML 表格里怎么让一个单元格横跨多列
用
属性，直接写在
colspan
或
标签里就行。它不是 CSS，也不是 JS 控制的，是 HTML 原生属性，浏览器一解析就生效。
常见错误是写成
colspan="2px"
或
colspan="two"
——必须是纯数字，比如
colspan="2"
，否则无效，浏览器会忽略。
注意：如果某行有 4 列，你加了一个
colspan="3"
的单元格，那这行剩下所有单元格加起来必须刚好占 1 列，否则表格结构会错位，尤其在嵌套表格或配合
border-collapse: collapse
时更明显。
示例：
立即学习
“
前端免费学习笔记（深入）
”；
姓名
成绩
张三
85
92
rowspan
，规则和
colspan
类似，但方向是垂直的。同样只接受正整数，不能带单位、不能是字符串。
容易踩的坑是：
rowspan
会“吃掉”下面行对应位置的单元格。比如第一行
汇总
，否则视觉上会重叠或错行——浏览器其实会把它当成新列渲染，表格就乱了。
典型使用场景：左侧固定标签列（如“语文”“数学”）需要对齐多个学生行，或者报表里的分组标题。
示例（正确写法）：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
科目
张三
85
92
colspan
和
rowspan
可以同时出现在同一个
上，比如
。
但要注意：它们作用的是同一个单元格的“覆盖范围”，不是叠加效果。这个单元格会横跨 2 列、纵跨 3 行，总共占据 2×3=6 个逻辑格子的位置。
关键点在于后续行的单元格数量必须动态减少——比如第一行用了
colspan="2" rowspan="2"
，那第二行的
里就要少写一个
，否则列数对不上，表格渲染会出问题，DevTools 里可能看到黄色警告，但不会报错。
兼容性完全没问题，所有浏览器从 IE6 开始就支持，不用考虑降级。
合并单元格后样式对不齐、边框断开怎么办
这不是
colspan
/
rowspan
本身的问题，而是 CSS 边框模型和表格渲染机制导致的。最常见的是
border-collapse: separate
（默认）下，合并单元格的边框和其他单元格的边框不共享，看起来像断开了。
解决方法只有两个：
强制用
border-collapse: collapse
，这是最干净的方案
手动给合并单元格加
border
，并确保相邻单元格的
border
颜色/宽度一致（但不如第一种可靠）
另一个隐形问题是：如果合并单元格里内容太多，又没设
white-space: normal
或
max-width
，它可能把整行撑宽，影响其他列对齐。建议配合
table-layout: fixed
+ 显式设置列宽来稳住布局。
最后提醒一句：合并单元格会让表格语义变弱，屏幕阅读器可能读不准行列关系。如果数据要被辅助技术访问，优先考虑用 CSS Grid 或语义化结构替代，而不是硬靠
rowspan
做视觉分组。
相关文章