HTML表格样式[编辑 | 编辑源代码]

HTML表格样式是指通过CSS对HTML表格进行视觉美化和布局控制的技术。表格是网页中展示结构化数据的重要元素，合理的样式设计能显著提升数据的可读性和用户体验。

基础表格结构[编辑 | 编辑源代码]

在讨论样式前，先回顾基础HTML表格结构：

<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

输出效果：

标题1	标题2
数据1	数据2

核心样式属性[编辑 | 编辑源代码]

边框样式[编辑 | 编辑源代码]

控制表格边框的最常用属性：

table {
  border-collapse: collapse; /* 合并相邻边框 */
  border: 2px solid #333;   /* 外边框 */
}
td, th {
  border: 1px solid #ccc;   /* 单元格边框 */
}

间距控制[编辑 | 编辑源代码]

斑马纹效果[编辑 | 编辑源代码]

通过伪类实现交替行颜色：

tr:nth-child(even) {
  background-color: #f2f2f2;
}

高级样式技巧[编辑 | 编辑源代码]

响应式表格[编辑 | 编辑源代码]

当表格宽度超过容器时的处理方案：

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

固定表头[编辑 | 编辑源代码]

滚动时保持表头固定的技术：

thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

单元格合并效果[编辑 | 编辑源代码]

使用CSS实现视觉合并：

.merged-cell {
  grid-column: span 2; /* 合并两列 */
}

数学公式应用[编辑 | 编辑源代码]

在数据表格中可能需要展示公式，例如计算平均值：

$\bar{x} = \frac{1}{n} \sum_{i = 1}^{n} x_{i}$

实际案例[编辑 | 编辑源代码]

电商产品对比表格样式实现：

<table class="product-comparison">
  <thead>
    <tr>
      <th>特性</th>
      <th>基础版</th>
      <th>专业版</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>存储空间</td>
      <td>50GB</td>
      <td>500GB</td>
    </tr>
    <tr class="highlight">
      <td>价格</td>
      <td>$9.99/月</td>
      <td>$29.99/月</td>
    </tr>
  </tbody>
</table>

<style>
.product-comparison {
  width: 100%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.highlight {
  background-color: #fffde7;
  font-weight: bold;
}
</style>

性能优化建议[编辑 | 编辑源代码]

避免使用嵌套表格
对大型表格使用虚拟滚动
优先使用CSS而非HTML属性（如border="1"）

浏览器兼容性[编辑 | 编辑源代码]

特性	Chrome	Firefox	Safari
91+ \| 90+ \| 15+
84+ \| 80+ \| 14.1+

通过系统学习这些表格样式技术，开发者可以创建出既美观又功能强大的数据展示界面。建议读者在实践中逐步尝试这些特性，并根据具体需求组合使用。