使用CSS對HTML表格進行樣式設定

這是一份有關如何使用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元素以及th和td等內部元素應用邊框樣式：

1
2
3

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

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

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

1
2
3

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

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

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

tags: [“CSS”, “HTML”, “tables”, “styling”]