用CSS樣式化HTML表

在CSS中使用表格的簡要指南

過去的表格在CSS中被過度使用，因為它們是我們創建精美頁面佈局的唯一方法之一。

如今，借助Grid和Flexbox，我們可以將表格移回其應做的工作：樣式表。

讓我們從HTML開始。這是一個基本表：

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</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：

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

如果我們將其與某個餘量配對，則會得到一個不錯的結果：

表的一個常見問題是能夠在一行中添加顏色，而在另一行中添加另一種顏色。使用:nth-child(odd)或者:nth-child(even)選擇器：

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

這給我們：

如果添加border-collapse: collapse;在table元素上，所有邊框都折疊為一個：

免費下載我的CSS手冊

用CSS樣式化HTML表

在CSS中使用表格的簡要指南

更多CSS教程：