CSS 語法 11：表格 table

表格 table

在 HTML 語法裡面和 table 有關的標籤，像是 table, th, tr, td 都可以宣告其內的 CSS 樣式，像是文字、背景、邊框等。

th {
background-color: #0099CC;
color:#FFF;
}
td {
border-bottom : dashed 1px #C0C0C0;
}

<table>
<tr>
<th>動物</th>
<th>飲食</th>
</tr>
<tr>
<td>大象</td>
<td>素食</td>
</tr>
<tr>
<td>老虎</td>
<td>肉食</td>
</tr>
<tr>
<td>小豬</td>
<td>雜食</td>
</tr>
</table>

動物	飲食
大象	素食
老虎	肉食
小豬	雜食

border-collapse

border-collapse 屬性有以下參數值

border-collapse:separate;	邊框彼此分開(預設值) 邊框彼此分開(預設值) 邊框彼此分開(預設值) 邊框彼此分開(預設值)
border-collapse:collapse;	邊框彼此合併 邊框彼此合併 邊框彼此合併 邊框彼此合併
border-collapse:inherit;	繼承自父層的 border-collapse 屬性值 (部分IE瀏覽器不支援，但有人在乎嗎？)

如果你想設定奇數列和偶數列有不一樣的樣式，可以如下宣告：

tr:nth-child(even) {background: gray}
tr:nth-child(odd) {background: white}

這樣偶數列就會呈現灰底、奇數列就會呈現白底。