CSS 如何设置交替表行颜色

表格用于以结构化和有组织的方式呈现数据，是网页设计的重要组成部分。交替行颜色用于增强表格的易读性和美观性。交替行颜色是一种设计技巧，其中表格中每隔一行的背景颜色与相邻行不同。这种技巧有助于读者区分行，并改善表格的整体外观。

设置交替行颜色的基本CSS语法

CSS中的:nth-child()伪类选择器用于设置表格的交替行颜色。nth-child选择器允许根据兄弟节点组中的位置选择元素。设置交替行颜色的基本语法如下：

tr:nth-child(even) {
   background-color: #f2f2f2;
}

在这里，tr:nth-child(even)选择器选择每个偶数编号的tr（表格行）元素，并将背景色应用为#f2f2f2。

步骤

按照以下给出的步骤使用CSS设置交替的表格行颜色：

步骤1：创建表格

要设置交替的表格行颜色，我们需要使用HTML创建一个表格。基本的表格结构包括元素，，，和元素。例如-

示例

<table>
   <thead>
      <tr>
         <th>Header 1</th>
         <th>Header 2</th>
         <th>Header 3</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Row 1, Column 1</td>
         <td>Row 1, Column 2</td>
         <td>Row 1, Column 3</td>
      </tr>
      <tr>
         <td>Row 2, Column 1</td>
         <td>Row 2, Column 2</td>
         <td>Row 2, Column 3</td>
      </tr>
         <tr>
         <td>Row 3, Column 1</td>
         <td>Row 3, Column 2</td>
         <td>Row 3, Column 3</td>
      </tr>
   </tbody>
</table>

这里，我们创建了一个表格，它有三列和三行，包括标题行。

步骤2：添加CSS样式

下一步是添加CSS样式来设置交替行颜色。在CSS中，交替行颜色是使用nth-child伪类选择器来设置的。例如 −

tr:nth-child(odd) {
   background-color: lightblue;
}
tr:nth-child(even) {
   background-color: lightgreen;
}

在上述CSS代码中，我们使用tr:nth-child(odd)选择器将奇数行的背景颜色设置为淡蓝色，tr:nth-child(even)选择器将偶数行的背景颜色设置为淡绿色。

步骤3：将样式应用于表格

最后一步是将CSS样式应用于表格。例如 –

示例

<html>
<head>
   <style>
      tr:nth-child(odd) { background-color: lightblue; }
      tr:nth-child(even) {background-color: lightgreen;}
   </style>
</head>
<body>
   <h3>Set alternate table row color using CSS</h3> 
   <table>
      <thead>
         <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 3</td>
         </tr>
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
         </tr>
         <tr>
            <td>Row 3, Column 1</td>
            <td>Row 3, Column 2</td>
            <td>Row 3, Column 3</td>
         </tr>
         <tr>
            <td>Row 4, Column 1</td>
            <td>Row 4, Column 2</td>
            <td>Row 4, Column 3</td>
         </tr>
      </tbody>
   </table>
</body>
</html>