今天我们来学习一下如何使用CSS来给表格的行添加相间的颜色效果。
首先，我们需要给表格中的奇数行和偶数行定义不同的样式。 这可以通过CSS中的伪类选择器 `:nth-child()` 来实现。
我们可以使用以下代码来定义奇数行和偶数行的样式：
```
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
```
这里的 `table` 是指表格元素， `tr` 则是指表格中的行元素。 `:nth-child()` 伪类选择器可以使用参数来选择表格中的偶数行和奇数行。
在以上代码中， `odd` 参数用于选择奇数行，而 `even` 参数用于选择偶数行。 我们为奇数行设置了浅灰色的背景颜色，而为偶数行设置了白色的背景颜色。
接下来，我们将使用一个完整的CSS样式来设置表格的行颜色相间：
```
table {
width: 100%;
border-collapse: collapse;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #4CAF50;
color: white;
}
```
在以上代码中，我们为表格定义了 `width` 和 `border-collapse` 样式。通过定宽并将边框合并，可以让表格看起来更加整洁。
然后我们使用了 `:nth-child()` 伪类选择器来定义奇数行和偶数行的颜色。
为了使表格更加具有可读性，我们还设置了表格中表头单元格的背景颜色，并调整了其字体颜色为白色。 最后，我们还设置了表格的单元格和表头的边框和内边距样式。
现在，我们已经成功地创建了一个具有行颜色相间效果的表格。 祝你好运，开始创建你自己的表格吧！
完整代码如下：
```
table {
width: 100%;
border-collapse: collapse;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
table th, table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #4CAF50;
color: white;
}