css 类表格 |css button img

要创建 CSS 类表格，首先需要使用 HTML 中的 table 标签创建表格的结构，再使用 CSS 中的 class 属性对表格样式进行定义。下面是一个简单的 CSS 类表格示例：

<table class="mytable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>王五</td>
<td>30</td>
<td>男</td>
</tr>
</tbody>
</table>
.mytable {
border-collapse: collapse;
border-spacing: 0;
font-size: 16px;
width: 100%;
}
.mytable thead th {
background-color: #eee;
border: 1px solid #aaa;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.mytable tbody tr:nth-child(odd) {
background-color: #f5f5f5;
}
.mytable tbody td {
border: 1px solid #aaa;
padding: 10px;
text-align: center;
vertical-align: middle;
}

上述代码中定义了一个名为 “mytable” 的 CSS 类，其中包括了表格的通用样式，如边框合并、字体大小和宽度等。接着，通过 “.mytable thead th” 和 “.mytable tbody td” 等选择器对表头和表格数据的样式进行了定义。其中，”.mytable tbody tr:nth-child(odd)” 选择器表示对奇数行的背景色进行了设置，使其在视觉上有更好的分隔效果。

通过使用 CSS 类表格，大家可以轻松地实现各种风格的表格布局，并且具有较好的可扩展性和可复用性，为网页设计带来更为便利的体验。