用html做一个五行六列的表格;设置表头蓝色,字体白色;奇数行同一个颜色,偶数行同一个颜色;
时间: 2024-03-02 16:52:09 浏览: 124
可以使用以下代码实现:
```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` 属性来实现。
阅读全文