HTML+設(shè)置+tr變色

標簽在HTML中常用于定義表格的行，而tr中的單元格則由或標簽定義。我們可以使用CSS設(shè)置表格行的背景顏色，實現(xiàn)表格變色的效果。

例如：

table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ddd;
}

上面的CSS代碼意思是，偶數(shù)行的背景顏色（從第二行開始）為 #ddd，而奇數(shù)行的背景顏色為 #f2f2f2。

另外，我們也可以通過添加class屬性來為表格特定行添加不同的樣式。

例如：

<table>
<tr class="success">
<td>第一行</td>
<td>第一行的數(shù)據(jù)</td>
</tr>
<tr class="warning">
<td>第二行</td>
<td>第二行的數(shù)據(jù)</td>
</tr>
<tr class="danger">
<td>第三行</td>
<td>第三行的數(shù)據(jù)</td>
</tr>
</table>

上面的代碼中，我們?yōu)椴煌谋砀裥兄付瞬煌腸lass屬性值，分別為 success、warning 和 danger，然后在CSS中為這些class屬性值添加不同的樣式。

例如：

.success {
background-color: #dff0d8;
}
.warning {
background-color: #fcf8e3;
}
.danger {
background-color: #f2dede;
}

上面的CSS代碼意思是，當某個表格行的class屬性值為 success 時，其背景顏色為 #dff0d8，當class屬性值為 warning 時，其背景顏色為 #fcf8e3，當class屬性值為 danger 時，其背景顏色為 #f2dede。