天天干天天玩天天操,国产中文字幕视频在线观看,男女爽爽爽视频

導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立...

網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。

在前端開發中，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中文網其它相關文章！

網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。

溫馨提示：喜歡本站的話，請收藏一下本站！

當前位置:雨林木風下載站 > 網頁設計教程 > 詳細頁面

css如何完成table表格的單元格合并？colspan與rowspan合并單元格（案例）

本類教程下載

系統下載排行