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

1. 基本樣式
2. 添加背景色和顏色
3. 添加鼠標(biāo)懸停效果
4. 添加表頭樣式
5. 添加表格線

如何用CSS來美化表格？

在網(wǎng)頁設(shè)計(jì)中，表格是不可或缺的元素，但默認(rèn)的表格樣式往往比較單調(diào)，如何用CSS來美化表格呢？

基本樣式

我們可以給表格添加一些基本樣式，比如設(shè)置表格的寬度、高度、邊框等。

table {
  width: 100%;
  height: 200px;
  border: 1px solid #000;
}

添加背景色和顏色

我們可以給表格添加一些背景色和顏色，讓表格更加醒目和美觀。

table {
  background-color: #f0f0f0;
}
table th {
  color: #333;
}
table td {
  color: #666;
}

添加鼠標(biāo)懸停效果

我們還可以給表格添加鼠標(biāo)懸停效果，讓用戶更加清晰地了解表格中的信息。

table tr:hover {
  background-color: #e0e0e0;
}

添加表頭樣式

表頭也是表格中非常重要的部分，我們可以給表頭添加一些特殊的樣式，比如設(shè)置不同的顏色、字體大小等。

table th {
  color: #333;
  font-size: 16px;
}

添加表格線

我們還可以給表格添加一些表格線，讓表格更加清晰和易讀。

table {
  border-collapse: separate; /* 設(shè)置表格線為單獨(dú)樣式 */
  border-spacing: 0 2px; /* 設(shè)置表格線之間的間距 */
}

通過以上樣式的設(shè)置，我們可以讓表格變得更加美觀和易用，這只是一個(gè)簡單的示例，實(shí)際上CSS中還有很多其他的屬性和技巧可以用來美化表格，我們可以根據(jù)自己的需求和設(shè)計(jì)來靈活地使用CSS來美化表格。