在HTML中，表格是一種很常見的元素，而設置表格的顏色則可以使頁面的樣式更加豐富多彩。下面介紹一些設置HTML表格顏色的方法：
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black; /*設置表格邊框*/
border-collapse: collapse; /*設置表格邊框重疊*/
}
/*設置表格標題的顏色*/
th {
background-color: #4CAF50;
color: white;
}
/*設置表格行的背景顏色交替*/
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #ddd; /*設置鼠標懸停在行上時的背景顏色*/
}
/*設置表格單元格的字體顏色*/
td {
font-size: 16px;
color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
</tr>
<tr>
<td>張三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
</body>
</html>以上代碼展示了如何使用CSS樣式表來設置表格的顏色，其中：
- <table>標簽表示要創建一個表格
- <th>標簽表示表格的標題
- <tr>標簽表示表格的一行
- <td>標簽表示表格的一個單元格
- border屬性用來設置表格的邊框，將它設置為1px solid black即可創建一個帶有黑色邊框的表格
- border-collapse屬性用來設置表格邊框的重疊，將它設置為collapse可以使邊框看起來更加整潔
- background-color屬性用來設置背景顏色，可以為表格標題、表格行以及表格單元格設置不同的顏色
- nth-child(even)選擇器表示選擇表格行中偶數行，從而實現交替顏色的效果
- hover偽類可以用來設置鼠標懸停時的表格顏色
- color屬性可以設置表格單元格中文本的顏色
通過以上代碼，就可以輕松地設置HTML表格的顏色了。
上一篇vue引外來js
下一篇html滾動文字實例代碼