table表格使用:nth-child()实现隔行变色与对齐

本篇攻略将介绍如何使用CSS中的nth-child()伪类选择器对表格进行隔行变色与对齐。下面分为两步进行详细讲解。

第一步：隔行变色

第一步，我们将实现表格隔行变色的效果。首先，在HTML中编写一个表格，表格中包含内容及表头，如下所示：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>22</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td>18</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>男</td>
      <td>23</td>
    </tr>
  </tbody>
</table>

接下来，我们在CSS中对表格进行样式设置。首先，我们将设置表格的默认样式：

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
thead, tbody {
  border: 1px solid black;
}
th, td {
  border: 1px solid black;
  padding: 10px;
}
th {
  background-color: #ccc;
}

然后，使用nth-child()伪类选择器设置表格隔行变色的样式。代码如下所示：

tbody tr:nth-child(odd) {
  background-color: #f6f6f6;
}

上述代码将选择表格中所有奇数行（第1行、第3行、第5行……），并将它们的背景颜色设置为灰色(#f6f6f6)，从而实现了表格隔行变色的效果。

第二步：对齐

接下来，我们实现表格内文本对齐的效果。首先，在HTML中编写一个表格，包含居左、居中、居右三种对齐方式的文本，代码如下所示：

<table>
  <thead>
    <tr>
      <th>默认对齐</th>
      <th>居左对齐</th>
      <th>居中对齐</th>
      <th>居右对齐</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>这是默认对齐的文本</td>
      <td class="left">这是居左对齐的文本</td>
      <td class="center">这是居中对齐的文本</td>
      <td class="right">这是居右对齐的文本</td>
    </tr>
  </tbody>
</table>

然后，在CSS中对表格进行样式设置。首先，我们将设置表格的默认样式：

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}
thead, tbody {
  border: 1px solid black;
}
th, td {
  border: 1px solid black;
  padding: 10px;
}
th {
  background-color: #ccc;
}

接着，我们使用.left、.center和.right三个类名分别对应居左、居中、居右三种对齐方式。代码如下所示：

td.left {
  text-align: left;
}

td.center {
  text-align: center;
}

td.right {
  text-align: right;
}

上述代码将选择表格中使用.left、.center和.right三个类名的单元格，对它们的文本进行左对齐、中对齐和右对齐。从而实现了表格内文本对齐的效果。

综上所述，我们利用nth-child()和text-align属性相结合，可以实现表格隔行变色与对齐两种效果的设置。