9. Table

表格可以改變的屬性為邊界大小顏色與文字對齊等，做個表格舉例說明，內容數字是胡謅的:

	<table id="css9_1">
		<caption>高科大</caption>
		<tr>
			<th></th>
			<th>校區一</th>
			<th>校區二</th>
			<th>校區三</th>
			<th>校區四</th>
			<th>校區五</th>
		</tr>
		<tr>
			<td>面積</td>
			<td>100</td>
			<td>200</td>
			<td>300</td>
			<td>400</td>
			<td>500</td>
		</tr>
		<tr>
			<td>教師數</td>
			<td>200</td>
			<td>250</td>
			<td>300</td>
			<td>350</td>
			<td>400</td>
		</tr>
		<tr>
			<td>學生數</td>
			<td>5000</td>
			<td>5500</td>
			<td>6000</td>
			<td>6500</td>
			<td>7000</td>
		</tr>
	</table>

加上css code:

	table#css9_1 th, td, caption{
		border: 1px solid blue;
	}

高科大
	校區一	校區二	校區三	校區四	校區五
面積	100	200	300	400	500
教師數	200	250	300	350	400
學生數	5000	5500	6000	6500	7000

做點修改:

	table#css9_2{
		border-collapse: collapse;
	}

	table#css9_2 th, td, caption{
		border: 1px solid blue;
	}

高科大
	校區一	校區二	校區三	校區四	校區五
面積	100	200	300	400	500
教師數	200	250	300	350	400
學生數	5000	5500	6000	6500	7000

修改寬高及其他色彩並且加上hover:

	table#css9_3{
		border: 3px solid #9400d3;
		width: 100%;
		border-collapse: collapse;
	}

	table#css9_3 th{
		border: 3px solid #9400d3;
		height: 2em;
		color: red;
	}
	table#css9_3 caption{
		border-left: 3px solid #9400d3;
		border-top: 3px solid #9400d3;
		border-right: 3px solid #9400d3;
		background: olive;
		height: 1em;
		color: #fffaf0;
		padding: 3px 0px;
		font-weight: bold; 
	}

	table#css9_3 td{
		border: 3px solid #9400d3;
		text-align: center;
	}

	table#css9_3 tr:hover{
		background: blue;
	}

高科大
	校區一	校區二	校區三	校區四	校區五
面積	100	200	300	400	500
教師數	200	250	300	350	400
學生數	5000	5500	6000	6500	7000

nth-child() selector

表格一樣適用nth-child() selector，使用前面範例表格內容，再加上以下的css code:

	table#css9_4 tr:nth-child(even){
		background: #ffe4e1;
	}

請注意要加在hover的前面，免得hover的效果被覆蓋了。

高科大
	校區一	校區二	校區三	校區四	校區五
面積	100	200	300	400	500
教師數	200	250	300	350	400
學生數	5000	5500	6000	6500	7000

Others

補充:

table-layout: fixed (auto); >> 平均(自動)分配欄寬。
word-wrap : break-word; >> 自動斷行。
border-spacing: 5px; >> 設定邊框間隙。
<th rowspan="2"> </th> >> 跨行(colspan="2":跨欄)。