第四課 HTML基本結構之二

1.table表格:表格主要用處不是用來佈局的,而是用在處理表格式的數據,如各種股票板塊數據、商品參數;

<table>		<!-- 表格標籤 -->
	<tr>	<!-- 行標籤 -->
		<td>姓名</td>	<!-- 單元格標籤 -->
		<td>性別</td>
		<td>年齡</td>
	</tr>
	<tr>	<!-- 行標籤 -->
		<td>張三</td>	<!-- 單元格標籤 -->
		<td>男</td>
		<td>23</td>
	</tr>
	<tr>	<!-- 行標籤 -->
		<td>李四</td>	<!-- 單元格標籤 -->
		<td>女</td>
		<td>25</td>
	</tr>
</table>

注意:

<table></table>中只能放<tr></tr>,<tr></tr>中間只能放<td></td>,<td></td>之間是一個容器,可以放任何標籤;

表格的屬性:

屬性名 含義 常用屬性值
border 設置表格的邊框,默認爲0,無邊框

像素值

cellspacing 設置單元格與單元格之間的空白間距 像素值,默認爲2
cellpadding 設置單元格內容與單元格邊框之間的空白間距 像素值,默認爲1
width 設置表格的寬度 像素值
height 設置表格的高度

像素值

align 設置表格在網頁中的水平對齊方式 left、center、right
<table border="1" cellspacing="0" cellpadding="20" align="center" width="500" height="200">		<!-- 表格標籤 -->
	<tr>	<!-- 行標籤 -->
		<td>姓名</td>	<!-- 單元格標籤 -->
		<td>性別</td>
		<td>年齡</td>
	</tr>
	<tr>	<!-- 行標籤 -->
		<td>張三</td>	<!-- 單元格標籤 -->
		<td>男</td>
		<td>23</td>
	</tr>
	<tr>	<!-- 行標籤 -->
		<td>李四</td>	<!-- 單元格標籤 -->
		<td>女</td>
		<td>25</td>
	</tr>
</table>

2.表頭標籤:表頭一般位於表格的第一行或者第一列,其文本加粗居中。設置表頭非常簡單,只需用表頭標記<th></th>替代相應的單元格標記<td></td>即可;

3.表格結構(瞭解):在使用表格進行佈局時,可以將表格劃分爲頭部、主體和頁腳,所以可以用<thead></thead>定義表格的頭部,必須位於<table></table>標籤中,一般包含網頁的logo和導航等頭部信息;<tbody></tbody>用於定義表格的主體,位於<table></table>標籤中,一般包含除頭部和底部外的所有內容;<thead></thead>和<tbody></tbody>是並列的;底部有兼容性問題,不贅述;

<table border="1" cellspacing="0" cellpadding="20" align="center" width="500" height="200">		<!-- 表格標籤 -->
	<thead>
		<tr>	<!-- 行標籤 -->
			<th>姓名</th>	<!-- 單元格標籤 -->
			<th>性別</th>
			<th>年齡</th>
		</tr>
	</thead>

	<tbody>
		<tr>	<!-- 行標籤 -->
			<td>張三</td>	<!-- 單元格標籤 -->
			<td>男</td>
			<td>23</td>
		</tr>
		<tr>	<!-- 行標籤 -->
			<td>李四</td>	<!-- 單元格標籤 -->
			<td>女</td>
			<td>25</td>
		</tr>
	</tbody>
</table>

4.表格標題:caption

<table border="1" cellspacing="0" cellpadding="20" align="center" width="500" height="200">		<!-- 表格標籤 -->
	<caption>我是表格標題</caption>
	<thead>
		<tr>	<!-- 行標籤 -->
			<th>姓名</th>	<!-- 單元格標籤 -->
			<th>性別</th>
			<th>年齡</th>
		</tr>
	</thead>

	<tbody>
		<tr>	<!-- 行標籤 -->
			<td>張三</td>	<!-- 單元格標籤 -->
			<td>男</td>
			<td>23</td>
		</tr>
		<tr>	<!-- 行標籤 -->
			<td>李四</td>	<!-- 單元格標籤 -->
			<td>女</td>
			<td>25</td>
		</tr>
	</tbody>
</table>

注意:caption標籤必須緊隨table標籤之後,只能對每一個表格定義一個標題,通常這個標題會被居中於表格之上;

5.合併單元格:跨行合併:rowspan,跨列合併:colspan;

<table border="1" cellspacing="0" cellpadding="20" align="center" width="500" height="200">		<!-- 表格標籤 -->
	<caption>我是表格標題</caption>
	<thead>
		<tr>	<!-- 行標籤 -->
			<td>姓名</td>	<!-- 單元格標籤 -->
			<td>性別</td>
			<td>年齡</td>
		</tr>
	</thead>

	<tbody>
		<tr>	<!-- 行標籤 -->
			<td rowspan="2">張三</td>	<!-- 單元格標籤 -->
			<td>男</td>
			<td>23</td>
		</tr>
		<tr>	<!-- 行標籤 -->
			<td>李四</td>	<!-- 單元格標籤 -->
			<td colspan="2">女</td>
			<!-- <td>25</td> -->
		</tr>
	</tbody>
</table>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章