代码实现表格样式的制作
时间: 2024-06-08 21:07:45 浏览: 11
表格样式可以通过CSS来实现,以下是一个简单的例子:
HTML代码:
```
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
</table>
```
CSS代码:
```
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #4CAF50;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
```
效果如下:
![table example](https://i.imgur.com/0XeK0YH.png)
解释一下CSS代码:
- `border-collapse: collapse;` 把表格的边框合并为一条边框。
- `width: 100%;` 让表格宽度占满父元素。
- `text-align: left;` 让表格内容左对齐。
- `padding: 8px;` 设置单元格的内边距为8像素。
- `background-color: #4CAF50;` 设置表头的背景颜色。
- `color: white;` 设置表头文字颜色为白色。
- `tr:nth-child(even)` 选择偶数行,设置背景颜色为浅灰色。可以通过 `nth-child` 选择器来设置表格的奇偶行样式,或者根据需要设置其他行的样式。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)