HTML5基礎（五）零基礎入門 （上）

上一篇筆記記錄了元素分組，文章鏈接：http://blog.csdn.net/flytosky_l/article/details/70313500

這裏，接着做HTML5的基礎知識-表格元素，(新建一個文件名爲index.html，在文件目錄 code下)

表格元素，HTML5元素常用元素。

表格元素彙總

表格的基本結構最少需要三個元素，<table>、<tr>、<td>,其他作爲可選輔助存在。

元素名稱 ： table ， 說明 ：表示表格

元素名稱 ： thead ， 說明 ：表示標題行

元素名稱 ： tbody ， 說明 ：表示表格主體

元素名稱 ： tfoot ， 說明 ：表示表格表腳

元素名稱 ： tr ， 說明 ：表示一行單元格

元素名稱 ： th ， 說明 ：表示標題行單元格

元素名稱 ： td ， 說明 ：表示單元格

元素名稱 ： col ， 說明 ：表示一列

元素名稱 ： colgroup ， 說明 ：表示一組列

元素名稱 ： caption ， 說明 ：表示表格標題

表格解析

<table><tr><td>構建基礎表格

代碼：

    表格元素
<br>
<table>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>Lucy</td>
        <td>女</td>
        <td>未婚</td>
    </tr>
</table>

運行如圖：

<th>

修改代碼：

<br>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>性別</th>
        <th>婚否</th>
    </tr>
    <tr>
        <td>張三</td>
        <td>男</td>
        <td>未婚</td>
    </tr>
    <tr>
        <td>Lucy</td>
        <td>女</td>
        <td>未婚</td>
    </tr>
</table>

運行如圖：

colspan

代碼：

<br>
<table border="1">
	<tr>
		<th>姓名</th>
		<th>性別</th>
		<th>婚否</th>
	</tr>
	<tr>
		<td>張三</td>
		<td>男</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>女</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td colspan="3">統計：共兩人</td>
	</tr>

運行如圖：

style

設置寬度，代碼：

style
<br>
<table border="1" style="width:300px">
	<tr>
		<th>姓名</th>
		<th>性別</th>
		<th>婚否</th>
	</tr>
	<tr>
		<td>張三</td>
		<td>男</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>女</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td colspan="3">統計：共兩人</td>
	</tr>
</table>

運行結果如圖：

rowspan

代碼

rowspan
<br>
<table border="1" style="width:300px">
	<tr>
		<th rowspan="4">基層情況</th>
		<th>姓名</th>
		<th>性別</th>
		<th>婚否</th>
	</tr>
	<tr>
		<td>張三</td>
		<td>男</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>女</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td colspan="3">統計：共兩人</td>
	</tr>
</table>

運行如圖：

thead

添加表頭。，限制和規範了表頭部分，尤其是對於動態生成表頭，它的位置不固定，使用這個元素，可以限定在開頭位置。代碼:

thead
<br>
<table border="1" style="width:300px">

	<tr>
		<td>張三</td>
		<td>男</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>女</td>
		<td>未婚</td>
	</tr>
	
	<thead>
		<tr>
			<th>姓名</th>
			<th>性別</th>
			<th>婚否</th>
	</tr>

	</thead>
</table>

運行如圖：

tfoot

添加表主體。代碼：

tfoot
<br>
<table border="1" style="width:300px">
	<tfoot>
		<tr>
			<td colspan="3">統計 ： 共兩人</td>
		</tr>
	</tfoot>
	<tr>
		<td>張三</td>
		<td>男</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>女</td>
		<td>未婚</td>
	</tr>
	<tr>
		<th>姓名</th>
		<th>性別</th>
		<th>婚否</th>
	</tr>
	
</table>

運行如圖：

caption

添加表格標題，<caption>元素，給表格添加一個標題

caption
<br>
<table border="1" style="width:300px">
	<caption>這是一個人員記錄表格</caption>
	<tfoot>
		<tr>
			<td colspan="3">統計 ： 共兩人</td>
		</tr>
	</tfoot>
	<tr>
		<td>張三</td>
		<td>男</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>女</td>
		<td>未婚</td>
	</tr>
	<thead>
		<tr>
			<th>姓名</th>
			<th>性別</th>
			<th>婚否</th>
		</tr>
	</thead>
	
</table>

colgroup

設置列，該元素是爲了處理某一列，span屬性定義處理那些列，1表示第一列，2表示第二列，如果要單獨設置第二列，那麼需要聲明兩個，先處理第一列，將列點移入第二位，在處理第二列。代碼：

colgroup
<br>
<table border="1" style="width:300px">
	<caption>這是一個人員記錄表格</caption>
	<colgroup style="background:white" span="1"></colgroup>
	<colgroup style="background:red" span="1"></colgroup>
	<tfoot>
		<tr>
			<td colspan="3">統計 ： 共兩人</td>
		</tr>
	</tfoot>
	<tr>
		<td>張三</td>
		<td>男</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>女</td>
		<td>未婚</td>
	</tr>
	<thead>
		<tr>
			<th>姓名</th>
			<th>性別</th>
			<th>婚否</th>
		</tr>
	</thead>
	
</table>

運行如圖：

col

更靈活的設置列，<col>元素表示單獨一列，一個表示一列，控制更加靈活。如果設置span，則控制多列.代碼:

col
<br>
<table border="1" style="width:300px">
	<caption>這是一個人員記錄表格</caption>
	<col style="background:white" span="2"></col>
	<col style="background:red"></col>
	<tfoot>
		<tr>
			<td colspan="3">統計 ： 共兩人</td>
		</tr>
	</tfoot>
	<tr>
		<td>張三</td>
		<td>男</td>
		<td>未婚</td>
	</tr>
	<tr>
		<td>Lucy</td>
		<td>女</td>
		<td>未婚</td>
	</tr>
	<thead>
		<tr>
			<th>姓名</th>
			<th>性別</th>
			<th>婚否</th>
		</tr>
	</thead>
	
</table>

運行如圖：