十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
小编给大家分享一下css实现table表格单元格合并的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
创新互联公司专业为企业提供福州网站建设、福州做网站、福州网站设计、福州网站制作等企业网站建设、网页设计与制作、福州企业网站模板建站服务,10年福州做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
我们先建立一个简单的表单:
班级 | 姓名 | 年龄 | 电话 |
---|---|---|---|
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表格单元格合并的方法有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!