風格化的表格CSS樣式參考

一、表格的基本結構

在開始講述風格化的表格CSS樣式前，我們先來看一下表格最基本的結構應該是怎樣的。

一個基本的表格由<table> 、<thead> 、<tbody> 和 <tr> 四個元素組成。<thead> 里包含了表頭 <tr>，<tbody> 則包含了表格的內容行 <tr>。一個完整的表格一定需要包含這四個部分。

下面是一個基本的表格結構代碼示例：

<table>
  <thead>
    <tr>
      <th>表頭單元格1</th>
      <th>表頭單元格2</th>
      <th>表頭單元格3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>內容單元格1</td>
      <td>內容單元格2</td>
      <td>內容單元格3</td>
    </tr>
    <tr>
      <td>內容單元格4</td>
      <td>內容單元格5</td>
      <td>內容單元格6</td>
    </tr>
  </tbody>
</table>

二、常見的表格樣式

表格是網頁中常用的元素之一。為了讓表格更加美觀，我們需要使用一些CSS樣式。下面介紹幾種常用的樣式。

1、斑馬線樣式

斑馬線樣式即交替顯示不同的背景顏色，給人以條理感和清晰度。可以通過CSS的:nth-child偽類來實現。代碼如下：

/* 奇數行背景顏色為白色 */
tr:nth-child(odd){background-color:#fff;}
/* 偶數行背景顏色為灰色 */
tr:nth-child(even){background-color:#ccc;}

2、鼠標懸浮樣式

鼠標懸浮樣式表明當前鼠標所在行，方便用戶查看。可以通過CSS的:hover偽類來實現。代碼如下：

/* 鼠標在行上時背景色為藍色 */
tr:hover{background-color:#00f;}

3、單元格邊框樣式

表格單元格的邊框樣式可以讓表格更加清晰易讀，有助於區分不同的數據。邊框樣式可以通過CSS的border屬性來設置，代碼如下：

/* 所有單元格的邊框為1像素的實線 */
td{border:1px solid #000;}

三、自定義表格樣式

上面介紹了一些常用的表格樣式，但我們往往需要根據設計需求自行定義表格樣式。下面列舉一些實用的CSS代碼，供大家參考。

1、自定義表格樣式1

下面這個代碼定義了一種簡單的表格樣式，單元格之間有細小的邊框分隔線，字體和背景顏色也有一些調整。

table{
  border-collapse: collapse;
  border: 1px solid #ddd;
}

th, td{
  padding: 8px;
  text-align: left;
}

th{
  background-color: #eee;
}

td{
  border-top: 1px solid #ddd;
}

tr:nth-child(even) td{
  background-color: #f9f9f9;
}

2、自定義表格樣式2

下面這個代碼定義了一種圓角矩形的表格樣式，單元格之間有粗大的邊框分隔線，字體和背景顏色也有一些調整。

table{
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

th, td{
  padding: 10px 15px;
  text-align: center;
  border: 1px solid #999;
  border-radius: 8px;
  font-size: 14px;
}

th{
  background-color: #eee;
}

tr:nth-child(even) td{
  background-color: #f9f9f9;
}

3、自定義表格樣式3

下面這個代碼定義了一種簡約的表格樣式，單元格之間沒有邊框分隔線，每行單元格的背景顏色不同。

table{
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

th, td{
  padding: 10px 15px;
  text-align: center;
  font-size: 14px;
}

th{
  background-color: #333;
  color: #fff;
}

tr:nth-child(even) td{
  background-color: #f1f1f1;
}

tr:nth-child(odd) td{
  background-color: #fff;
}

四、總結

以上介紹了表格的基本結構和幾種常用的樣式，也給出了一些實用的自定義表格樣式代碼供大家參考。在實際應用中，我們需要根據設計需求選擇適合的樣式，併合理運用CSS來達到最佳效果。