1. 表格的基本结构
在 CSS 中，对表格的样式设置主要是针对表格的单元格（也就是 table cell）进行的。因此，在讨论样式的细节之前，首先需要了解表格的基本结构。
一个简单的表格的基本结构由三个部分组成：表头（thead）、表身（tbody）和表尾（tfoot），其中表头和表尾是可选的。具体代码结构如下：
<table>
<thead>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td></td>
<td>3000</td>
</tr>
</tfoot>
</table>
1.1 表头（thead）
表头是表格的第一个子元素，用<thead>标签表示。它通常包含表格的标题，列的标签或其他相关信息。在 CSS 中，我们可以使用以下属性来设置表头的样式：
background-color：设置表头的背景色
color：设置表头中文本的颜色
font-weight：设置表头中文本的字体粗细
text-align：设置表头中文本的水平对齐方式
vertical-align：设置表头中文本的垂直对齐方式
例如，我们可以使用以下 CSS 代码来设置表头的样式：
thead {
background-color: #f2f2f2;
color: #000;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
1.2 表身（tbody）
表身是表格的主体部分，用<tbody>标签表示。它通常包含表格中的多个行，每行由一个或多个单元格（<td>）组成。在 CSS 中，我们可以使用以下属性来设置表身的样式：
background-color：设置表身的背景色
color：设置表身中文本的颜色
font-weight：设置表身中文字体的粗细
text-align：设置表身中文本的水平对齐方式
vertical-align：设置表身中文本的垂直对齐方式
例如，我们可以使用以下 CSS 代码来设置表身的样式：
tbody {
background-color: #fff;
color: #000;
text-align: center;
vertical-align: middle;
}
1.3 表尾（tfoot）
表尾是表格的最后一个子元素，用<tfoot>标签表示。它通常包含表格中的汇总信息或脚注等信息。在 CSS 中，我们可以使用以下属性来设置表尾的样式：
background-color：设置表尾的背景色
color：设置表尾中文本的颜色
font-weight：设置表尾中文字体的粗细
text-align：设置表尾中文本的水平对齐方式
vertical-align：设置表尾中文本的垂直对齐方式
例如，我们可以使用以下 CSS 代码来设置表尾的样式：
tfoot {
background-color: #DDD;
color: #000;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
2. 单元格（table cell）的样式
除了设置表格的基本结构外，我们还可以对表格中的每个单元格进行样式设置。需要注意的是，单元格样式的设置需要针对不同的具体情况进行区分。
2.1 单元格的宽度和高度
单元格的宽度和高度可以通过以下 CSS 属性进行设置：
width：设置单元格的宽度
height：设置单元格的高度
例如，我们可以使用以下 CSS 代码来设置单元格的宽度和高度：
td {
width: 100px;
height: 50px;
}
2.2 单元格的边框
表格中的单元格可以通过以下 CSS 属性设置边框样式：
border-style：设置边框的样式，包括 solid、dashed、dotted、double、groove、ridge、inset、outset 或 none
border-width：设置边框的宽度
border-color：设置边框的颜色
border：可以一次性设置多个边框属性，比如“border: 1px solid #ccc;”
例如，我们可以使用以下 CSS 代码来设置单元格的边框：
td {
border-style: solid;
border-width: 1px;
border-color: #ccc;
}
2.3 单元格的背景色
可以使用以下 CSS 属性设置单元格的背景色：
background-color：设置单元格的背景色
例如，我们可以使用以下 CSS 代码来设置单元格的背景色：
td {
background-color: #f2f2f2;
}
2.4 单元格的字体样式
可以使用以下 CSS 属性设置单元格中文本的样式：
color：设置单元格中文本的颜色
font-family：设置单元格中文字体的类型
font-size：设置单元格中文字体的大小
font-weight：设置单元格中文字体的粗细
text-align：设置单元格中文本的水平对齐方式
vertical-align：设置单元格中文本的垂直对齐方式
例如，我们可以使用以下 CSS 代码来设置单元格中文本的样式：
td {
color: #000;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
text-align: center;
vertical-align: middle;
}
3. 表格的斑马线样式
表格的斑马线样式是一种常见的表格样式，它可以轻松地增强表格的可读性。具体来说，表格的斑马线样式可以设置表格中奇数行和偶数行的背景色不同，类似于斑马条纹的效果。
在 CSS 中，我们可以使用伪类（:nth-child）来设置表格的斑马线样式。例如，我们可以使用以下代码设置表格的斑马线样式：
tr:nth-child(odd) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #fff;
}
4. 表格的悬停样式
表格的悬停样式（hover）是一种常见的表格样式，它可以在用户悬停在单元格上时显示一种不同的样式，比如改变背景颜色、字体颜色等。具体来说，我们可以使用:hover 来表示鼠标悬停状态下的样式。
例如，我们可以使用以下 CSS 代码在用户悬停在表格单元格上时改变其背景颜色：
td:hover {
background-color: #ff0;
}
5. 表格的边框合并样式
表格的边框合并样式可以使表格的视觉效果更好，而且可以有效地减少代码量。在 CSS 中，我们可以使用以下属性来设置表格的边框合并样式：
border-collapse：设置表格的边框合并方式，包括 collapse 和 separate 两种取值
border-spacing：设置表格单元格之间的距离（对应于 border-collapse 设置为 separate 时使用）
例如，我们可以使用以下 CSS 代码设置表格的边框合并样式：
table {
border-collapse: collapse;
}
6. 总结
使用 CSS 来设置表格样式是一种非常实用的技巧，可以大大减少代码量，同时也可以增强表格的可读性和美观度。在实际应用中，我们需要根据具体的需求来灵活运用各种 CSS 属性，创造出更加符合实际需求的表格样式。