在前端开发中，html 表单是经常被使用到的，表单可以直观的把信息展现出来，有很好的交互功能；在表单中可以把同一类的信息合并在一起显示，这就需要把同一类的单元格合并在一起，那么怎样才能用css合并单元格。本章给大家介绍css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
我们先建立一个简单的表单：
| 班级 | 姓名 | 年龄 | 电话 |
|---|---|---|---|
| 601班 | Jack | 24 | 1351234567 |
| 601班 | Tom | 22 | 1351234567 |
| 602班 | Rose | 22 | 1351234567 |
| 602班 | 张三 | 25 | 1351234567 |
| 602班 | 李四 | 25 | 1351234567 |
表中的信息都是一列一列的显示出来，其实表单中只有两个班级，我们可以把多余重复的信息合并在一起，这样可以显得表单简洁。
表单的单元格合并有两种形式：纵向合并和横向合并，我们来看看css是怎样实现这两种合并单元格的：
立即学习“前端免费学习笔记（深入）”；
1、css纵向合并table表格单元格
rowspan属性用在td标签中，用来指定单元格纵向跨越的行数。
例：我们可以把两个显示601班的单元格合并在一起，三个显示602班的单元格合并在一起：
| 班级 | 姓名 | 年龄 | 电话 |
|---|---|---|---|
| 601班 | Jack | 24 | 1351234567 |
| Tom | 22 | 1351234567 | |
| 602班 | Rose | 22 | 1351234567 |
| 张三 | 25 | 1351234567 | |
| 李四 | 25 | 1351234567 |
rowspan=”2″表示从设置的td单元格开始向下合并两个单元格（本身一个，加上另外一个）；rowspan=”3″表示从设置的td单元格开始向下合并三个单元格（本身一个，加上另外两个）。
2、css横向合并table表格单元格
colspan属性用在td标签中，用来指定单元格横向跨越的列数。
例：我们可以把显示姓名和年龄两个单元格放在一起显示为姓名和年龄：
| 班级 | 姓名和年龄 | 电话 | |
|---|---|---|---|
| 601班 | Jack | 24 | 1351234567 |
| Tom | 22 | 1351234567 | |
| 602班 | Rose | 22 | 1351234567 |
| 张三 | 25 | 1351234567 | |
| 李四 | 25 | 1351234567 | |
colspan=”2″表示自左向右合并两个单元格。
以上就是css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1611994.html
微信扫一扫 
支付宝扫一扫 
