html表格样式（css）

### 如何使用CSS设置HTML表格样式

#### 使用类和ID定义样式

为了更好地控制表格的样式，可以给`<table>`标签分配一个特定的`class`或`id`属性。这样做的好处是可以针对这个具体的表格应用独特的样式而不会影响页面上的其他元素[^3]。

<table class="custom-table">
    <!-- 表格内容 -->
</table>

#### 基础表格样式

下面是一些基础的CSS规则用于美化HTML表格：

- **边框**: 可以为整个表格以及单元格添加边框。

  .custom-table {
      border-collapse: collapse; /* 合并相邻边框 */
      width: 100%;
  }

  .custom-table th,
  .custom-table td {
      border: 1px solid black;
      padding: 8px;
  }

- **背景颜色与文字对齐方式**

对于表头(`th`)和其他数据行(`td`)可以分别指定不同的背景色，并调整文本对其模式。

  .custom-table th {
      background-color: #f2f2f2;
      text-align: left;
  }

  .custom-table tr:nth-child(even) {background-color: #f9f9f9;}

上述代码片段展示了如何利用偶数行的不同背景色创建条纹效果，使得阅读体验更佳[^1]。

#### 高级特性

除了基本格式化外，还可以进一步增强用户体验，比如当鼠标悬停在某一行上时改变其外观:

.custom-table tr:hover {
    background-color: #ddd;
}

此段落描述了实现交互性的方法——即用户将指针移动到任意一行之上时会触发视觉反馈，从而提高可访问性和可用性[^2]。