备用表格行颜色 CSS

在表格中使用备用行颜色可以增强表格视觉效果，让用户更容易区分不同的行。在CSS中，我们可以使用伪类 :nth-child() 来设置备用行的背景颜色。

语法说明

语法如下：

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

其中的 even 表示偶数行，你也可以使用 odd 来表示奇数行。这里的 tr 是表格中的行元素。

示例代码

下面是一个简单的例子，展示如何使用备用行颜色。

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>26</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>27</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小丽</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小刚</td>
      <td>28</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小智</td>
      <td>24</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

使用备用行颜色的 CSS 如下：

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

结束语

通过这篇文章，相信大家已经掌握了如何使用 CSS 设置备用表格行颜色。记得在写表格时尽量使用语义化的 HTML 标签，并遵循 WCAG 的无障碍标准，让你的表格更加易读易用。