css实现table表格单元格合并的方法

小编给大家分享一下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表格单元格合并的方法有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

名称栏目：css实现table表格单元格合并的方法
文章来源：http://mswzjz.cn/article/psdejo.html