CSS表格样式简介
CSS(层叠样式表，Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等衍生技术)文档的样式的语言，它可以为文档添加样式、布局和动画效果，在本节中，我们将介绍如何使用CSS为表格添加样式。
创建一个简单的表格
1、我们需要在HTML文件中创建一个表格，以下是一个简单的表格示例：
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: f2f2f2;
}
</style>
</head>
<body>
<h2>简单表格示例</h2>
<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>
</table>
</body>
</html>
在这个示例中，我们创建了一个简单的表格，包含姓名、年龄和城市三列，接下来，我们将介绍如何使用CSS为表格添加样式。
使用CSS为表格添加样式
1、在<style>标签内，我们定义了一些基本的表格样式，我们设置了表格的宽度为100%,使其充满其父容器，接着，我们设置了表格边框的合并方式为collapse,使单元格之间的边框相邻时合并在一起，我们为表格、表头(<th>元素)和单元格(<td>元素)设置了边框、内边距和文本对齐方式，我们为表头设置了一个浅灰色的背景色。
2、为了使表格更具可读性，我们可以使用CSS的border-collapse属性将单元格之间的边框合并在一起，这样，当我们需要调整单元格宽度时，就不会出现额外的空白区域，在上面的示例中，我们已经将border-collapse属性设置为collapse。
高级表格样式技巧
1、为表格添加阴影和渐变背景色：可以通过设置box-shadow属性和线性渐变背景色来为表格添加阴影和渐变背景色。
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: f2f2f2; /* 浅灰色 */
}
/* 为表头添加阴影 */
th::after {
content: "";
display: inline-block;
width: 100%;
height: 40px; /* 根据需要调整 */
margin-bottom: 10px; /* 根据需要调整 */
}
/* 为表格添加渐变背景色 */
table::before {
content: "";
display: inline-block;
width: 100%;
height: 40px; /* 根据需要调整 */
}
table::after {
content: ""; // 由于伪元素无法直接设置高度，这里省略了设置高度的部分，可以根据需要自行调整高度值以达到理想的渐变效果，如果需要实现真正的渐变效果，可以考虑使用伪元素与背景图片结合的方式。
