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

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

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

	

		
班级
		
姓名
		
年龄
		
电话
	
	

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