一、搞懂rowspan和colspan：表格合并的”左右护法”
先说说为啥这两个属性这么重要。你想啊，平时做的表格哪有那么多规规矩矩的？课程表要合并连堂的格子，成绩表要合并同一个班级的表头，产品参数表要合并相同类别的属性——这些都得靠跨行跨列。但很多人一开始学就懵，总把这两个属性搞混，要么用了rowspan结果跨了列，要么属性值填错导致整个表格”散架”。
先记住一个口诀：rowspan是”上下粘”，colspan是”左右连”
。具体来说，rowspan控制的是”跨行合并”，比如你想让一个单元格占3行，就给它加rowspan=”3″；colspan控制的是”跨列合并”，想让单元格占2列，就写colspan=”2″。但这里有个关键：合并后要删掉被覆盖的单元格。举个例子，你在第一行第一列用了colspan=”2″，那这一行就不能再有第二列的单元格了，不然浏览器解析时就会”打架”，表格直接乱套。我去年帮朋友改表时，他就犯了这个错——加了colspan还留着后面的单元格，结果表格右侧多出一堆空白格子，怎么调都不对，后来删掉多余单元格才恢复正常。
那属性值怎么定？其实很简单：你想合并几个单元格，属性值就填几。比如要合并2行，rowspan=”2″；合并3列，colspan=”3″。但这里有个坑：不要超过表格实际的行列数。比如一个5列的表格，你给某个单元格设colspan=”6″，浏览器要么忽略这个值，要么整个表格变形。我见过最夸张的是一个新手做产品表，想把表头合并成一整行，结果表格只有4列，他写了colspan=”5″，最后表头直接”撑破”了表格边框，丑得不行。
可能你会问：”为啥非要用这两个属性？我用CSS的margin或padding把单元格挤在一起不行吗？”这里就得讲点专业知识了。浏览器解析表格时，是按照
（单元格）的顺序逐行渲染的，每个单元格默认占1行1列。如果你用CSS硬改单元格大小，表面上看着合并了，实际上表格的DOM结构还是乱的——屏幕阅读器会读错内容，搜索引擎抓取数据时也会出错，移动端适配时更是容易错位。MDN Web Docs上专门说过："表格结构应通过HTML语义化标签定义，而非仅靠CSS样式控制"（参考链接：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table#合并单元格，添加了nofollow标签）。所以想做规范的表格，还得老老实实用rowspan和colspan。
二、3个实例带你练手：从"会用"到"用对"
光说不练假把式，下面拿3个常见场景举例，带你一步步写代码，看完你就能直接套用了。每个例子我都会放正确代码和"错误示范"，帮你避开那些我踩过的坑。
实例1：制作课程表（rowspan实战）
课程表是最典型的跨行场景——比如周三上午有两节数学课连堂，这时候就需要用rowspan合并两行。先看基础结构：一个6行（周一到周五，每天上6节课）×7列（时间+6节课）的表格。正确做法是：在"数学课"所在的单元格加rowspan="2"，然后删掉下一行对应的单元格。
时间
周一
周二
周三
周四
周五
8:00-9:40
语文
数学
数学（连堂） <!-合并两行 >
英语
物理
10:00-11:40
数学
英语
<!-这里删掉了周三的单元格，因为上面已经合并了 >
物理
化学
错误示范：有人会在第二行还保留周三的单元格，结果浏览器会自动在后面补一个空白单元格，导致表格多出一列。我刚开始学的时候就这么干过，改了半天才发现是多写了一个
标签。
实例2：制作成绩表（colspan实战）
成绩表需要合并表头，比如"考试成绩"下面分"期中"和"期末"，这时候就用colspan。假设表头是"姓名|考试成绩（期中|期末）|总分"，那么"考试成绩"这个单元格就要跨2列，用colspan="2"。
姓名
考试成绩 <!-跨2列 >
总分
期中
期末
张三
85
92
177
这里有个小技巧：表头合并后，下一行对应的单元格数量要和合并后的列数匹配。比如上面"考试成绩"跨了2列，下一行就要有"期中"和"期末"两个单元格，加起来正好2列，表格才不会错位。
实例3：处理"合并后内容对齐"问题
很多人合并单元格后发现内容居中不了，或者单元格高度/宽度不对。其实解决办法很简单：给合并后的单元格加style="vertical-align: middle; text-align: center;"。比如合并课程表的连堂课时，加上这行样式，文字就会上下左右居中了。我帮朋友改电商产品表时，就用这个方法解决了"参数文字偏上"的问题，用户反馈"看着舒服多了"。
写完代码后一定要检查结构！推荐用W3C的HTML验证工具（https://validator.w3.org/nu/，添加了nofollow标签），输入你的表格代码，它会告诉你有没有多余的单元格、属性值是否合法。我现在做表格都会过一遍这个工具，基本能避免90%的结构问题。
最后想说：rowspan和colspan其实不难，关键是理解"合并即删除"的逻辑——合并了几个单元格，就要删掉后面对应数量的
。刚开始练的时候慢一点没关系，多写几个例子（比如试试用今天学的方法做一个班级课程表），不出3个例子你就能熟练掌握。如果做完遇到问题，欢迎在评论区贴你的代码，我帮你看看哪里出了错～
当然可以啊，而且这种情况还挺常见的呢。你想啊，有时候做表格，单元格又要跨行又要跨列，比如做项目进度表的时候，某个任务可能横跨3天（跨列），同时持续2周（跨行），这时候就得让一个单元格同时管着“上下”和“左右”。我之前帮一个装修公司做施工计划表，他们有个“水电改造”项目，要占2行（因为分“前期开槽”和“后期布线”两个阶段）、3列（对应周一到周三），当时就是在单元格里写了rowspan="2" colspan="3"，一下子就把那个大方格子画出来了，包工头看完说：“这下总算不用在表格旁边画箭头标注了！”
不过同时用这俩属性有个关键点，你得算清楚到底要“删”掉多少个单元格。就拿刚才那个2行3列的例子来说，这个合并后的单元格其实“吃”掉了原本2行×3列=6个小单元格的位置，所以你得把这6个单元格从表格里删掉，不然浏览器一糊涂，表格就会多出一堆空格子。我之前帮朋友改表时就踩过这坑，他同时用了rowspan="2"和colspan="2"，结果只删了3个单元格，少删了1个，表格右侧硬是多出来一个孤零零的格子，怎么调都去不掉，后来对着行数和列数一个个数，才发现漏删了第2行第2列的那个
标签。所以啊，同时用的时候，最好拿张纸画个小格子，把要合并的区域标出来，数清楚被覆盖的单元格数量，删干净了再写代码，保准不出错。
如何快速区分rowspan和colspan的用法？
可以记住口诀“rowspan是‘上下粘’，colspan是‘左右连’”。rowspan用于跨行合并（垂直方向合并单元格），属性值代表合并的行数；colspan用于跨列合并（水平方向合并单元格），属性值代表合并的列数。 rowspan="2"表示当前单元格占2行，colspan="3"表示占3列。
使用rowspan/colspan后表格结构错乱，可能是什么原因？
最常见的原因是“合并后未删除被覆盖的单元格”。 某单元格用了colspan="2"（跨2列），但该行仍保留了2个以上的
标签，浏览器解析时会因单元格数量不匹配导致结构错乱。 属性值超过表格实际行列数（如5列表格用colspan="6"）也会导致显示异常。
合并后的单元格内容如何居中对齐？
可以通过内联样式设置对齐方式，在
或
标签中添加style="vertical-align: middle; text-align: center;"。其中vertical-align控制垂直对齐（middle为上下居中），text-align控制水平对齐（center为左右居中）。例如合并课程表的连堂课时，添加该样式可让文字在合并后的大单元格中居中显示。
能否同时给一个单元格使用rowspan和colspan？
可以。如果需要同时跨行和跨列合并（如合并2行3列的单元格），只需在同一单元格中同时添加两个属性，如
内容
。但需注意，同时合并时要确保被覆盖的单元格（2行×3列共6个单元格）都已从表格结构中删除，避免因残留单元格导致布局错乱。
设置rowspan/colspan时，属性值填0或负数会怎样？
不 使用0或负数作为属性值。根据HTML规范，rowspan和colspan的属性值应为正整数（1及以上），0或负数会被浏览器视为无效值，可能导致单元格不合并或表格结构异常。实际使用时，属性值应等于需要合并的单元格数量（如合并2行则填2）。
