在網(wǎng)頁(yè)設(shè)計(jì)中，表格通常用于展示大量數(shù)據(jù)。然而，如果所有的表格都是相同的顏色，那么就很容易讓用戶感到無(wú)聊和失望。幸運(yùn)的是，使用CSS可以很容易地改變表格的顏色，方法就是利用: hover和:focus偽類選擇器。

table tr:hover {
background-color: #f5f5f5;
}
table tr:focus {
background-color: #f5f5f5;
}

如上所述，首先我們通過選擇器：hover來(lái)監(jiān)測(cè)鼠標(biāo)是否懸停在各行之一。如果是，則更改背景色為灰色。我們還創(chuàng)建了一個(gè):focus選擇器，以確保行被正確突出顯示（在使用鍵盤瀏覽時(shí)）。

此外，我們還可以使用CSS類來(lái)直接控制表格顏色。我們只需在CSS中指定該類的屬性，然后在HTML中為表格添加類名稱。下面是一個(gè)示例：

.table-zebra tr:nth-child(even) {
background-color: #f5f5f5;
}

在這個(gè)例子中，我們使用了nth-child選擇器來(lái)選擇表格中的偶數(shù)行，因此在添加.table-zebra這個(gè)類后，相應(yīng)的行會(huì)被設(shè)為灰色。

最后，我們還可以使用JavaScript來(lái)改變表格的顏色。這種方法雖然在性能方面稍遜于CSS，但它提供了更大的靈活性和控制權(quán)。下面是一個(gè)使用jQuery的JavaScript代碼片段：

$(document).ready(function() {
$("tr").click(function() {
$(this).toggleClass("selected");
});
});

在這個(gè)代碼片段中，我們監(jiān)聽了單擊事件，當(dāng)單擊表格中的任何行時(shí)，該行會(huì)被添加或刪除一個(gè)名為“selected”的類。這樣我們就可以通過樣式表中的.selected規(guī)則來(lái)更改被選行的顏色了。