写一个 h5 带颜色的表格
时间: 2024-03-05 12:54:05 浏览: 19
可以使用HTML5的 `<table>` 标签和CSS来创建一个带颜色的表格。以下是一个示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse; /* 合并表格边框 */
width: 100%; /* 表格宽度 */
}
th, td {
padding: 8px; /* 单元格内边距 */
text-align: left; /* 文本对齐方式 */
border-bottom: 1px solid #ddd; /* 单元格底部边框 */
}
th {
background-color: #4CAF50; /* 表头背景颜色 */
color: white; /* 表头文本颜色 */
}
tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行背景颜色 */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>20</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>25</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
</body>
</html>
```
在上面的代码中,我们使用了CSS来设置表格的样式。其中:
- `border-collapse: collapse;` 属性用于合并表格边框,使其更美观;
- `width: 100%;` 属性用于设置表格的宽度为100%;
- `th, td` 选择器用于设置表头和单元格的样式;
- `padding: 8px;` 属性用于设置单元格的内边距;
- `text-align: left;` 属性用于设置单元格中文本的对齐方式;
- `border-bottom: 1px solid #ddd;` 属性用于设置单元格的底部边框;
- `th` 选择器用于设置表头的样式,包括背景颜色和文本颜色;
- `tr:nth-child(even)` 选择器用于设置偶数行的背景颜色。
此外,在HTML中,我们使用了 `<thead>` 和 `<tbody>` 标签来区分表头和表格内容,以便更好地组织表格结构。