今天我們來學習一下如何使用CSS來給表格的行添加相間的顏色效果。
首先，我們需要給表格中的奇數行和偶數行定義不同的樣式。 這可以通過CSS中的偽類選擇器 `:nth-child()` 來實現。
我們可以使用以下代碼來定義奇數行和偶數行的樣式：
```
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
```
這里的 `table` 是指表格元素， `tr` 則是指表格中的行元素。 `:nth-child()` 偽類選擇器可以使用參數來選擇表格中的偶數行和奇數行。
在以上代碼中， `odd` 參數用于選擇奇數行，而 `even` 參數用于選擇偶數行。 我們為奇數行設置了淺灰色的背景顏色，而為偶數行設置了白色的背景顏色。
接下來，我們將使用一個完整的CSS樣式來設置表格的行顏色相間：
```
table {
width: 100%;
border-collapse: collapse;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #4CAF50;
color: white;
}
```
在以上代碼中，我們為表格定義了 `width` 和 `border-collapse` 樣式。通過定寬并將邊框合并，可以讓表格看起來更加整潔。
然后我們使用了 `:nth-child()` 偽類選擇器來定義奇數行和偶數行的顏色。
為了使表格更加具有可讀性，我們還設置了表格中表頭單元格的背景顏色，并調整了其字體顏色為白色。 最后，我們還設置了表格的單元格和表頭的邊框和內邊距樣式。
現在，我們已經成功地創建了一個具有行顏色相間效果的表格。 祝你好運，開始創建你自己的表格吧！
完整代碼如下：
```
table {
width: 100%;
border-collapse: collapse;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #4CAF50;
color: white;
}上一篇css表格行間距怎么設置
下一篇css表格行隱藏