HTML5表格顏色設置教程 HTML5表格是網頁設計中非常常用的組件。表格便于我們展示數據和信息，且十分靈活。如果要讓表格更好看，我們可以通過設置表格的顏色來使其更加吸引人。 HTML5中設置表格顏色有許多方式。下面，我們來一一介紹它們。請注意代碼中的預格式化標簽（pre標簽），它可以正確顯示HTML代碼。 1. 使用CSS樣式 可以通過CSS樣式來設置表格的顏色。通過CSS樣式，我們可以設置表格和表格中的行和列的顏色。 例如，你可以使用以下代碼來設置表格的顏色：

<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>

在這個例子中，我們設置表格的邊框為1像素的灰色虛線，單元格的內邊距為8像素，并設置表頭的背景顏色為深綠色，并將文字顏色設置為白色。 2. 使用HTML顏色代碼 HTML還提供了若干個顏色代碼。我們可以使用這些代碼來設置表格和單元格的顏色。 例如，你可以使用以下代碼來設置表頭和單元格的背景：

<table>
<tr>
<th style="background-color:#4CAF50;">姓名</th>
<th style="background-color:#4CAF50;">年齡</th>
<th style="background-color:#4CAF50;">居住地</th>
</tr>
<tr>
<td style="background-color:#FFF7E2;">張三</td>
<td style="background-color:#FFF">23</td>
<td style="background-color:#FFF7E2;">北京</td>
</tr>
<tr>
<td style="background-color:#FFF7E2;">李四</td>
<td style="background-color:#FFF">31</td>
<td style="background-color:#FFF7E2;">上海</td>
</tr>
</table>

在這個例子中，我們設置了表頭和單元格的背景顏色。在顏色代碼前，加上“#”即可設置顏色。 3. 使用CSS選擇器 另一種設置表格顏色的方法是使用CSS選擇器。這種方法可以根據不同的條件來選擇不同的單元格或行，從而對它們的顏色進行設置。 例如，你可以使用以下代碼來設置表格中年齡大于30歲的人的姓名的顏色：

<style type="text/css">
table tr td:nth-child(2) {
color: red;
}
</style>

在這個例子中，我們使用了CSS選擇器（“:nth-child”）來選擇表格中的第二列，也就是年齡。然后，我們對這些單元格的文本顏色進行了設置。 總之，有很多方法可以用來設置HTML5表格的顏色。你可以根據實際需要來選擇使用哪種方法。