這是一份有關如何使用CSS處理表格的簡要指南。

在過去,我們通常過度使用表格來創建華麗的頁面佈局,因為它們是唯一的選擇之一。

如今,隨著Grid和Flexbox的出現,我們可以讓表格回到它原本的作用:樣式設定。

讓我們從HTML開始。這是一個基本的表格:

<table>
 <thead>
 <tr>
 <th scope="col">姓名</th>
 <th scope="col">年齡</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <th scope="row">Flavio</th>
 <td>36</td>
 </tr>
 <tr>
 <th scope="row">Roger</th>
 <td>7</td>
 </tr>
 </tbody>
</table>

默認情況下,這個表格看起來並不太吸引人。瀏覽器只提供了一些標準的樣式:

當然,我們可以使用CSS來調整表格的所有元素。

讓我們從邊框開始。一個漂亮的邊框可以讓表格大有不同。

我們可以對table元素以及thtd等內部元素應用邊框樣式:

table, th, td {
 border: 1px solid #333;
}

如果加上一些外邊距,我們會得到一個漂亮的效果:

表格中常見的一個特點是可以為一行添加顏色,並為另一行添加不同的顏色。這可以使用nth-child(odd)nth-child(even)選擇器實現:

tbody tr:nth-child(odd) {
 background-color: #af47ff;
}

這將給我們帶來以下效果:

如果在表格元素中添加border-collapse: collapse;,則所有邊框將合併為一個: