html好看的表格css
时间: 2023-09-02 11:05:53 浏览: 58
以下是一个简单的 HTML 表格和 CSS 样式的例子,你可以根据自己的需求进行修改:
HTML 代码:
```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>
<tr>
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
</table>
```
CSS 代码:
```css
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th,
td {
text-align: left;
padding: 8px;
}
th {
background-color: #eee;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
td:first-child,
th:first-child {
border-left: none;
}
td:last-child,
th:last-child {
border-right: none;
}
tr:last-child td {
border-bottom: none;
}
```
这段 CSS 样式会让表格看起来更美观、易读,其中包括:
- `border-collapse: collapse;`:让表格边框合并,看起来更整洁。
- `width: 100%;`:让表格占据整个容器的宽度。
- `margin-bottom: 20px;`:让表格与下方的元素保持一定的距离。
- `text-align: left;`:让表格中的文本左对齐。
- `padding: 8px;`:给单元格设置内边距,让表格看起来更整洁。
- `background-color: #eee;`:给表头单元格设置背景颜色。
- `tr:nth-child(even)`:让偶数行的背景色变为灰色,增加对比度。
- `td:first-child, th:first-child`:去掉第一列单元格的左边框。
- `td:last-child, th:last-child`:去掉最后一列单元格的右边框。
- `tr:last-child td`:去掉表格最后一行单元格的下边框。