CSS 如何在HTML表格上创建斑马纹，而不使用JavaScript和甚至/奇数类别生成

在本文中，我们将介绍如何使用纯CSS来创建HTML表格上的斑马纹，而无需使用JavaScript或者甚至/奇数类别生成。

阅读更多：CSS 教程

什么是斑马纹？

斑马纹是一种在表格中交替显示不同样式的效果，使得表格更易于阅读和区分行。常见的斑马纹效果为交替行的背景色不同，通常是一行浅色背景，一行深色背景。

使用伪类选择器创建斑马纹

为了创建斑马纹，我们可以使用CSS的伪类选择器来选择表格中的偶数行或奇数行，并为它们应用不同的样式。

在HTML中，我们可以使用<table>、<tr>和<td>元素来创建表格。我们可以通过在CSS中对这些元素使用伪类选择器来选择特定的行，并为其添加样式。

下面是一个示例的HTML表格：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>35</td>
  </tr>
</table>

要为表格创建斑马纹，我们可以使用:nth-child伪类选择器来选择特定的行。使用:nth-child选择器时，我们可以指定一个公式来选择表格中的行。例如，:nth-child(even)将选择表格中的偶数行，:nth-child(odd)将选择表格中的奇数行。

下面是一个使用CSS为表格添加斑马纹的示例：

tr:nth-child(even) {
  background-color: #f2f2f2; /* 浅色背景 */
}

tr:nth-child(odd) {
  background-color: #ffffff; /* 深色背景 */
}

在上面的示例中，我们为偶数行添加了浅色背景，为奇数行添加了深色背景。您可以根据自己的需要选择不同的颜色。

示例

接下来，让我们通过一个完整的示例来演示如何创建斑马纹。

HTML代码：

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>35</td>
  </tr>
</table>

CSS代码：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
}

tr:nth-child(even) {
  background-color: #f2f2f2; /* 浅色背景 */
}

tr:nth-child(odd) {
  background-color: #ffffff; /* 深色背景 */
}

上面的代码将创建一个带有斑马纹的简单表格。偶数行将具有浅色背景，奇数行将具有深色背景。

你可以根据自己的需要修改CSS代码来自定义表格的样式和斑马纹效果。