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

小编给大家分享一下css实现table表格单元格合并的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！

我们先建立一个简单的表单：

<table border="1" cellspacing="0" width="50%" height="150">
	<tr>
		<th>班级</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>电话</th>
	</tr>
	<tr>
		<td>601班</td>
		<td>Jack</td>
		<td>24</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>601班</td>
		<td>Tom</td>
		<td>22</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>602班</td>
		<td>Rose</td>
		<td>22</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>602班</td>
		<td>张三</td>
		<td>25</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>602班</td>
		<td>李四</td>
		<td>25</td>
		<td>1351234567</td>
	</tr>
</table>

表中的信息都是一列一列的显示出来，其实表单中只有两个班级，我们可以把多余重复的信息合并在一起，这样可以显得表单简洁。

表单的单元格合并有两种形式：纵向合并和横向合并，我们来看看css是怎样实现这两种合并单元格的：

1、css纵向合并table表格单元格

rowspan属性用在td标签中，用来指定单元格纵向跨越的行数。

例：我们可以把两个显示601班的单元格合并在一起，三个显示602班的单元格合并在一起：

<table border="1" cellspacing="0" width="50%" height="150">
	<tr>
		<th>班级</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>电话</th>
	</tr>
	<tr>
		<td rowspan="2">601班</td><!--rowspan="2"纵向合并两个单元格-->
		<td>Jack</td>
		<td>24</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>Tom</td>
		<td>22</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td rowspan="3">602班</td><!--rowspan="3"纵向合并三个单元格-->
		<td>Rose</td>
		<td>22</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>张三</td>
		<td>25</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>25</td>
		<td>1351234567</td>
	</tr>
</table>

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

rowspan="2"表示从设置的td单元格开始向下合并两个单元格（本身一个，加上另外一个）；rowspan="3"表示从设置的td单元格开始向下合并三个单元格（本身一个，加上另外两个）。

2、css横向合并table表格单元格

colspan属性用在td标签中，用来指定单元格横向跨越的列数。

例：我们可以把显示姓名和年龄两个单元格放在一起显示为姓名和年龄：

<table border="1" cellspacing="0" width="50%" height="150">
	<tr>
		<th>班级</th>
		<th colspan="2">姓名和年龄</th><!--colspan="2"横向合并两个单元格-->
		<th>电话</th>
	</tr>
	<tr>
		<td rowspan="2">601班</td><!--rowspan="2"纵向合并两个单元格-->
		<td>Jack</td>
		<td>24</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>Tom</td>
		<td>22</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td rowspan="3">602班</td><!--rowspan="3"纵向合并三个单元格-->
		<td>Rose</td>
		<td>22</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>张三</td>
		<td>25</td>
		<td>1351234567</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>25</td>
		<td>1351234567</td>
	</tr>
</table>

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

colspan="2"表示自左向右合并两个单元格。

看完了这篇文章，相信你对css实现table表格单元格合并的方法有了一定的了解，想了解更多相关知识，欢迎关注行业资讯频道，感谢各位的阅读！

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

相关推荐