在CSS中我们用来给表格设置样式的有以下属性：
1. 基本表格样式
- 边框 ：使用
border属性可以为表格添加边框。 - 内边距 ：
padding属性用于增加单元格内的空间。 - 外边距 ：
margin属性用于控制表格与其他元素之间的距离。
2. 表格结构样式
- 表头 ：
<thead>元素包含<tr>和<th>元素，用于表示表格的头部。你可以使用CSS为表头设置特定的样式，例如背景色、字体大小等。 - 表体 ：
<tbody>元素包含表格的主体部分，即<tr>和<td>元素。 - 表尾 ：
<tfoot>元素通常包含表格的底部信息，如总计等。
3. 单元格样式
- 行样式 ：你可以使用
:nth-child()伪类来选择并样式化特定的行。 - 列样式 ：虽然CSS没有直接选择列的方法，但你可以通过为
<td>或<th>元素添加类名或ID，然后应用样式来实现。 - 单元格边框合并 ：使用
border-collapse: collapse;可以使相邻的单元格边框合并为一个，并且表格的边框和单元格边框也进行合并。
4. 响应式表格
- 媒体查询：使用CSS媒体查询可以根据设备的屏幕尺寸来调整表格的布局和样式。
- 滚动条 ：对于较大的表格，可以使用
overflow-x: auto;来添加水平滚动条，以便在小屏幕上查看所有内容。
5. 表格样式属性
border-spacing: 设置单元格之间的空间。empty-cells: 控制是否显示空单元格的边框。caption-side: 控制表格标题的位置（上或下）。table-layout: 控制表格的布局算法（自动或固定）。
6. 其他常用样式
- 背景色和背景图像 ：使用
background-color和background-image为表格或单元格添加背景。 - 字体样式 ：使用
font-family、font-size、color等属性设置文本的样式。 - 阴影和圆角 ：使用
box-shadow和border-radius为表格或单元格添加视觉效果。
7. 示例
下面是一个简单的示例，展示了如何使用CSS为表格设置样式：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Styling with CSS</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<bodyth>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>[email protected]</td>
<td>30</td>
</tr>
<!-- More rows... -->
</tbody>
</table>
</body>
</html>在这个示例中，我们使用了border-collapse、border、padding、text-align等属性来设置表格的样式，并使用:nth-child()伪类来交替改变行的背景色。
最后通过实例查看效果：案例效果