编辑“︁HTML表格样式”︁

= HTML表格样式 =

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

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

<syntaxhighlight lang="html">
<table>
  <tr>
    <th>标题1</th>
    <th>标题2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>
</syntaxhighlight>

输出效果：
{| class="wikitable"
|-
! 标题1 !! 标题2
|-
| 数据1 || 数据2
|}

== 核心样式属性 ==

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

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

=== 间距控制 ===
<mermaid>
graph TD
    A[cellspacing] -->|单元格间距| B(表格级)
    C[cellpadding] -->|内容边距| D(单元格级)
    E[border-spacing] -->|CSS替代方案| F(现代用法)
</mermaid>

=== 斑马纹效果 ===
通过伪类实现交替行颜色：

<syntaxhighlight lang="css">
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</syntaxhighlight>

== 高级样式技巧 ==

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

<syntaxhighlight lang="css">
.table-container {
  overflow-x: auto;
  max-width: 100%;
}
</syntaxhighlight>

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

<syntaxhighlight lang="css">
thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}
</syntaxhighlight>

=== 单元格合并效果 ===
使用CSS实现视觉合并：

<syntaxhighlight lang="css">
.merged-cell {
  grid-column: span 2; /* 合并两列 */
}
</syntaxhighlight>

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

<math>
\bar{x} = \frac{1}{n}\sum_{i=1}^{n} x_i
</math>

== 实际案例 ==
电商产品对比表格样式实现：

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

== 浏览器兼容性 ==
{| class="wikitable"
|-
! 特性 !! Chrome !! Firefox !! Safari
|-
| sticky headers | 91+ | 90+ | 15+
|-
| gap in grid | 84+ | 80+ | 14.1+
|}

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

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML列表与表格]]