📌  相关文章
📜  如何使用 CSS 创建一个斑马条纹表？(1)

📅  最后修改于: 2023-12-03 15:23:50.156000             🧑  作者: Mango

如何使用 CSS 创建一个斑马条纹表

在网页开发中，我们经常需要使用表格来展示数据，而斑马条纹表格可以让表格更加美观、易读。下面将介绍如何使用 CSS 创建一个斑马条纹表。

HTML 结构

首先，我们需要先创建一个 HTML 表格，并添加表头和表格内容。示例代码如下：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>销售员</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>30</td>
      <td>市场营销</td>
    </tr>
  </tbody>
</table>
CSS 样式

接下来，我们需要使用 CSS 样式来为表格添加斑马条纹样式。我们可以通过 :nth-child 伪类选择器来为奇偶行设置不同样式。示例代码如下：

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

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

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

在上面的代码中，我们设置了表格的宽度为 100%，边框合并，表头和表格内容单元格的内边距为 10px，对齐方式为左对齐，底部边框为 1px 实线，表格的偶数行背景颜色为 #f2f2f2。

完整示例代码

下面是一个完整的 HTML 和 CSS 示例代码，你可以将其复制到任何 HTML 文件中，并查看效果。

<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th, td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
  </style>
</head>
<body>

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>程序员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>25</td>
      <td>销售员</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>30</td>
      <td>市场营销</td>
    </tr>
  </tbody>
</table>

</body>
</html>
总结

至此，我们已经学会了如何使用 CSS 创建一个斑马条纹表格。通过设置行的背景颜色，我们可以使表格更加美观，并且易读。希望本文能够对你有所帮助。