Title1

Title2

Title3

10. HTML表格使用

一、表格標籤

表格 描述
<table> 定義表格
<caption> 定義表格標題。
<th> 定義表格的表頭。
<tr> 定義表格的行。
<td> 定義表格單元。
<thead> 定義表格的頁眉。
<tbody> 定義表格的主體。
<tfoot> 定義表格的頁腳。
<col> 定義用於表格列的屬性。
<colgroup> 定義表格列的組。

 

二、表格

表格由<table> 標籤來定義。每個表格均有若干行(由<tr> 標籤定義),每行被分割為若干單元格(由<td> 標籤定義)。字母td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等

三、合併儲存格

rowspan:垂直合併

colspan:水平合併

四、練習

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>10-1.html 表格練習</title>
</head>
<body>
	<style type="text/css">
		.table th , .table td{
			width:200px;
			border:1px solid #4926BC;
			border-collapse:collapse;
		}
		.table td{
			text-align:center;
		}
	</style>
	<table class="table">
		<tr>
			<th></th>
			<th>一</th>
			<th>二</th>
			<th>三</th>
			<th>四</th>
			<th>五</th>
		</tr>
		<tr>
			<td>第一節</td>
			<td>國文</td>
			<td>英文</td>
			<td>數學</td>
			<td>地理</td>
			<td>公民</td>
		</tr>
		<tr>
			<td>第二節</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>第三節</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>第四節</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>第五節</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>第六節</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>第七節</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>第八節</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
	
</body>
</html>