html中常用的標籤-表格標籤

ZHOU_VIP發表於2017-06-18

表格標籤(****重要的標籤*****)
	* 可以對資料進行格式化,使資料顯示更加清晰

	* <table></table>: 表示表格的範圍
		- border:表格線
		- bordercolor:表格線的顏色
		- cellspacing:單元格直接的距離
		- width:表格的寬度
		- height:表格的高度

	** 在table裡面 <tr></tr>
		- 設定對齊方式 align: left  center  right

	   *** 在tr裡面 <td></td>
	   - 設定顯示方式 align: left  center  right

	   *** 使用th也可以表示單元格
		- 表示可以實現居中和加粗

	* 程式碼
		<table border="1" bordercolor="blue" cellspacing="0" width="200" height="150">
	
	* 畫圖分析表格的寫法
		- 首先定義一個表格的範圍使用table
			- 定義一行使用 tr
			- 定義一個單元格使用 td
	** 操作技巧:
		- 首先數有多少行 ,數每行裡面有多少個單元格
	
	** 表格的標題
		<caption></caption>

	** 合併單元格 (瞭解一下就可以了)
		- rowspan:跨行
			** <td rowspan="3">人員資訊</td>
		- colspan:跨列
			** <td colspan="3">人員資訊</td>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">
			<caption>人員資訊</caption>
			<tr align="center">
				<td colspan="3">人員資訊</td>
			</tr>
			<tr align="center">
				<td>姓名</td>
				<td>性別</td>
				<td>年齡</td>
			</tr>
			<tr>
				<td align="right">東方不敗</td>
				<td>男</td>
				<td rowspan="3">20</td>
			</tr>
			<tr>
				<td>嶽不群</td>
				<td>女</td>
				<td>30</td>
			</tr>
			<tr>
				<th>林平之</th>
				<th>男</th>
				<th>40</th>
			</tr>
			<tfoot>
				<tr>
					<td>統計</td>
					<td colspan="3">兩名</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>