### 表格样式设置：从基础到进阶的编程与CSS指南
在网页设计和文档编辑中，表格是一种重要的数据展示方式，它能够清晰地呈现行列数据，便于读者理解和分析，而表格样式的设置，则是通过CSS（层叠样式表）来实现的，它允许开发者对表格的外观进行精细控制，包括颜色、边框、间距、字体等各个方面，我们将从基础到进阶，详细介绍如何使用CSS来设置表格样式。
#### 一、基础表格样式设置
**1. 边框（Border）**
默认情况下，HTML表格的边框可能并不明显或根本不显示，为了设置表格的边框，我们可以使用CSS的`border`属性，给整个表格添加1px的黑色边框：
table {
border-collapse: collapse; /* 合并表格边框，避免双重边框 */
border: 1px solid black; /* 表格边框样式 */
}
table th, table td {
border: 1px solid black; /* 单元格边框样式 */
}
**2. 宽度与高度**
通过`width`和`height`属性，可以分别设置表格、行（`tr`）、单元格（`td`或`th`）的宽度和高度，设置表格宽度为100%：
table {
width: 100%;
}
**3. 字体与颜色**
使用`font-family`、`font-size`、`color`等属性，可以调整表格内文本的字体、大小和颜色。
table {
font-family: Arial, sans-serif;
}
table th {
color: white;
background-color: #333; /* 深灰色背景 */
}
table td {
color: #555; /* 深灰色文字 */
}
#### 二、进阶表格样式设置
**1. 鼠标悬停效果（Hover）**
通过`:hover`伪类，可以为表格行或单元格添加鼠标悬停时的样式变化，提升用户体验，改变行背景色：
table tr:hover {
background-color: #f5f5f5; /* 浅灰色背景 */
}
**2. 斑马线效果（Striped Rows）**
斑马线效果是指表格中的行交替显示不同的背景色，有助于区分不同的数据行，这通常通过`:nth-child()`伪类实现：
table tr:nth-child(even) {
background-color: #f2f2f2; /* 偶数行浅灰色背景 */
}
table tr:nth-child(odd) {
background-color: #ffffff; /* 奇数行白色背景 */
}
**3. 圆角边框（Border-Radius）**
为表格或单元格添加圆角边框，可以使表格看起来更加柔和、现代，使用`border-radius`属性：
table {
border-radius: 10px; /* 表格圆角 */
overflow: hidden; /* 防止内容溢出圆角 */
}
/* 注意：直接对td或th设置border-radius可能不会按预期工作，因为表格的边框是共享的 */
**4. 阴影效果（Box-Shadow）**
为表格添加阴影效果，可以增加立体感，使表格在页面上更加突出，使用`box-shadow`属性：
table {
box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 阴影效果 */
}
**5. 响应式设计（Responsive Design）**
对于移动设备或不同屏幕尺寸的浏览器，表格可能需要采用响应式设计，以确保数据在不同设备上都能良好展示，这通常涉及到媒体查询（Media Queries）和表格布局的调整：
```css
@media screen and (max-width: 600px) {
table, thead, tbody, th, td, tr {
display: block;
width: 100%;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
tr {
border: 1px solid #ccc;
td {
text-align: right;
padding-left: 50%;
position: relative;
td:before {
