css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2728字，纯文字阅读大概需要4分钟。

内容图文

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

<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>

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>

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

以上就是css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）全部内容，希望文章能够帮你解决css如何实现table表格的单元格合并？colspan和rowspan合并单元格（实例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端