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}

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

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…