用html制作表格，除去第一行表头外，偶数行和奇数行的颜色交替不同（假如有100行呢？所以肯定不是一行一行的添加样式）

可以使用CSS中的伪类选择器:nth-child()来实现偶数行和奇数行的颜色交替。具体步骤如下：

1. 在HTML中创建表格，并添加表头和表格内容，如下所示：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>21</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <!-- 其他行 -->
  </tbody>
</table>

2. 在CSS中使用:nth-child()选择器来为偶数行和奇数行分别设置不同的背景色，如下所示：

/* 奇数行 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* 偶数行 */
tr:nth-child(even) {
  background-color: #ffffff;
}

这样就可以实现表格中偶数行和奇数行的颜色交替了，无需逐行添加样式。如果表格有100行，同样适用。

相关问题

用html做一个五行六列的表格；设置表头蓝色，字体白色；奇数行黄色，偶数行绿色；

可以使用以下代码实现：

<table>
  <thead>
    <tr style="background-color: blue; color: white;">
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
      <th>表头4</th>
      <th>表头5</th>
      <th>表头6</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: yellow;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: green;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: yellow;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: green;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: yellow;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

解释一下代码：

- 与上一个问题的解释类似，这里不再赘述。
- 设置奇数行的背景颜色为黄色，偶数行的背景颜色为绿色，可以通过设置 `<tr>` 标签的 `style` 属性来实现。

用html做一个五行六列的表格；设置表头蓝色，字体白色；奇数行同一个颜色，偶数行同一个颜色；

可以使用以下代码实现：

<table>
  <thead>
    <tr style="background-color: blue; color: white;">
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
      <th>表头4</th>
      <th>表头5</th>
      <th>表头6</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: lightgray;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: white;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: lightgray;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: white;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: lightgray;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    <tr style="background-color: white;">
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
  </tbody>
</table>

解释一下代码：

- 首先是 `<table>` 标签，表示一个表格。
- `<thead>` 标签表示表头部分，包含一行用 `<tr>` 标签表示的表头行，其中每个表头单元格用 `<th>` 标签表示。
- `<tbody>` 标签表示表格内容部分，其中每行用 `<tr>` 标签表示，每个单元格用 `<td>` 标签表示。
- 设置表头行的背景颜色为蓝色，字体颜色为白色。
- 设置奇数行的背景颜色为浅灰色（lightgray），偶数行的背景颜色为白色。可以通过设置 `<tr>` 标签的 `style` 属性来实现。