下面是一个简单的示例表格及其对应的CSS样式:
HTML部分:
〓〓html代码如下:〓〓
<table class="my-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>女</td>
</tr>
</tbody>
</table>
CSS部分:
〓〓css代码如下:〓〓
.my-table {
width: 100%;
border-collapse: collapse;
}
.my-table th, .my-table td {
padding: 8px;
border: 1px solid #ccc;
}
.my-table thead {
background-color: #f2f2f2;
}
.my-table tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
上面给出的代码通过CSS样式为表格添加了基本的样式效果:
◆ .my-table 类设置了表格的宽度为100%并将边框合并。
◆ .my-table th, .my-table td 选择器定义了表格头部和单元格的样式,包括内边距和边框。
◆ .my-table thead 选择器设置了表头的背景颜色为浅灰色。
◆ .my-table tbody tr:nth-child(even) 选择器为偶数行设置了背景颜色为浅灰色。
这只是一个简单的示例,你可以根据需要进一步自定义表格的样式,例如调整字体、颜色、对齐方式等。