本文目錄導(dǎo)讀：

1. 基礎(chǔ)樣式設(shè)置
2. 單元格樣式
3. 表頭樣式
4. 鼠標(biāo)懸停樣式
5. 響應(yīng)式設(shè)計

如何為表格添加CSS樣式

在現(xiàn)代網(wǎng)頁設(shè)計中，使用CSS（層疊樣式表）為網(wǎng)頁元素添加樣式已經(jīng)成為標(biāo)配，表格作為展示數(shù)據(jù)的一種常見方式，同樣可以通過CSS來美化其外觀和增強(qiáng)用戶體驗，本文將介紹如何為表格創(chuàng)建CSS樣式。

基礎(chǔ)樣式設(shè)置

我們可以通過CSS設(shè)置表格的基礎(chǔ)樣式，如字體、顏色、邊框等。

table {
  width: 100%;
  border-collapse: collapse; /* 合并邊框 */
  font-family: Arial, sans-serif; /* 字體 */
}

單元格樣式

我們可以為表格的單元格添加樣式，設(shè)置單元格的背景色、文字顏色、邊框等。

table td {
  padding: 10px; /* 單元格內(nèi)邊距 */
  border: 1px solid #ddd; /* 單元格邊框 */
  background-color: #f2f2f2; /* 單元格背景色 */
}

表頭樣式

表頭通常用于標(biāo)識數(shù)據(jù)的列名，我們可以為其添加特殊的樣式以突出顯示。

table th {
  background-color: #333; /* 表頭背景色 */
  color: white; /* 表頭文字顏色 */
  font-weight: bold; /* 加粗字體 */
}

鼠標(biāo)懸停樣式

我們還可以為表格添加鼠標(biāo)懸停時的樣式，提高用戶體驗。

table tr:hover {
  background-color: #f5f5f5; /* 鼠標(biāo)懸停時的背景色 */
}

響應(yīng)式設(shè)計

對于響應(yīng)式網(wǎng)頁，我們還需要確保表格在不同屏幕尺寸下都能良好地顯示，可以通過媒體查詢來為不同屏幕尺寸設(shè)置不同的表格樣式。

@media screen and (max-width: 600px) {
  table, thead, tbody, th, td, tr {
    width: 100%; /* 在小屏幕上使表格全寬顯示 */
  }
}

通過以上步驟，我們可以為網(wǎng)頁中的表格添加豐富的CSS樣式，使其更加美觀和易于使用，在實際開發(fā)中，可以根據(jù)具體需求調(diào)整樣式細(xì)節(jié)，以達(dá)到***佳效果。