css如何實現table表格的儲存格合併？ colspan和rowspan合併單元格（實例）

在前端開發中，html 表單是經常被使用到的，表單可以直覺的把資訊展現出來，有很好的互動功能；在表單中可以把同一類的資訊合併在一起顯示，這就需要把同一類別的儲存格合併在一起，那麼怎樣才能用css合併儲存格。本章跟大家介紹css如何實現table表格的儲存格合併？ colspan和rowspan合併儲存格（實例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

我們先建立一個簡單的表單：

<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合併單元格（實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！