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

1. 使用CSS內(nèi)聯(lián)樣式設(shè)置表格行顏色
2. 使用CSS樣式表設(shè)置表格行顏色

CSS在網(wǎng)頁設(shè)計(jì)中扮演著重要的角色，其中表格樣式設(shè)置也是CSS的一個(gè)重要應(yīng)用方面，本文將介紹如何通過CSS設(shè)置表格各行的顏色，以美化網(wǎng)頁中的表格展示。

使用CSS內(nèi)聯(lián)樣式設(shè)置表格行顏色

在HTML表格中，可以通過內(nèi)聯(lián)樣式直接為各行的元素添加CSS樣式來設(shè)置顏色，為***行設(shè)置背景色：

<table>
  <tr style="background-color: #f0f0f0;"> <!-- ***行背景色設(shè)置 -->
    <td>數(shù)據(jù)一</td>
    <td>數(shù)據(jù)二</td>
  </tr>
  <tr>
    <td>數(shù)據(jù)三</td>
    <td>數(shù)據(jù)四</td>
  </tr>
  <!-- 其他行數(shù)據(jù) -->
</table>

使用CSS樣式表設(shè)置表格行顏色

除了內(nèi)聯(lián)樣式，還可以通過CSS樣式表來設(shè)置表格行顏色，在HTML文件中引入CSS樣式表，然后在樣式表中定義樣式規(guī)則。

<!-- HTML文件 -->
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- 引入CSS樣式表 -->
<table>
  <tr class="row1"> <!-- 應(yīng)用樣式類 -->
    <td>數(shù)據(jù)一</td>
    <td>數(shù)據(jù)二</td>
  </tr>
  <tr class="row2"> <!-- 應(yīng)用樣式類 -->
    <td>數(shù)據(jù)三</td>
    <td>數(shù)據(jù)四</td>
  </tr>
  <!-- 其他行數(shù)據(jù) -->
</table>

在CSS樣式表中定義樣式規(guī)則：

/* styles.css 文件 */
.row1 { background-color: #f0f0f0; } /* ***行背景色設(shè)置 */
.row2 { background-color: #e0e0e0; } /* 第二行背景色設(shè)置 */
/* 可以繼續(xù)定義其他行的樣式 */

三、使用CSS偽類設(shè)置表格行顏色（如:nth-child）

CSS的偽類選擇器可以用于選擇特定的行并設(shè)置顏色，使用:nth-child選擇器為奇數(shù)行或偶數(shù)行設(shè)置不同的背景色：

table tr:nth-child(odd) { background-color: #f5f5f5; } /* 奇數(shù)行背景色設(shè)置 */
table tr:nth-child(even) { background-color: #ffffff; } /* 偶數(shù)行背景色設(shè)置 */

通過以上方法，我們可以使用CSS輕松地為網(wǎng)頁中的表格各行設(shè)置不同的顏色，提升表格的視覺效果和用戶體驗(yàn)。