第四課 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>