正文

表格CSS奇偶行样式设置，轻松实现不同颜色，让数据一目了然

/0 浏览量
0422

在网页设计中，表格是展示数据的一种常见方式。为了让表格看起来更加美观，并且使数据更加直观，我们可以通过CSS为表格的奇偶行设置不同的背景颜色。下面，我将详细介绍如何通过CSS轻松实现表格奇偶行的颜色设置。

基础HTML表格结构

首先，我们需要一个基础的HTML表格结构。以下是一个简单的示例：

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>35</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>45</td>
      <td>产品经理</td>
    </tr>
  </tbody>
</table>

CSS样式设置

接下来，我们将通过CSS为表格的奇偶行设置不同的背景颜色。

/* 为偶数行设置背景颜色 */
table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* 为奇数行设置背景颜色 */
table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

在上面的代码中，我们使用了:nth-child选择器来选中表格中的偶数行和奇数行。even关键字表示偶数行，而odd关键字表示奇数行。同时，我们分别设置了它们的背景颜色。

整合HTML和CSS

将HTML和CSS代码整合在一起，即可看到效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格奇偶行样式设置</title>
  <style>
    /* 为偶数行设置背景颜色 */
    table tbody tr:nth-child(even) {
      background-color: #f2f2f2;
    }

    /* 为奇数行设置背景颜色 */
    table tbody tr:nth-child(odd) {
      background-color: #ffffff;
    }
  </style>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>28</td>
        <td>程序员</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>35</td>
        <td>设计师</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>45</td>
        <td>产品经理</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

通过以上步骤，我们就成功地为表格的奇偶行设置了不同的背景颜色。这样一来，用户在浏览表格时，可以更加清晰地分辨出数据的差异，使数据一目了然。

-- 展开阅读全文 --