跳到主要内容

HTML 表格样式

HTML表格是网页中展示数据的常用方式。然而，默认的表格样式通常比较单调。通过使用CSS，我们可以为表格添加样式，使其更具可读性和美观性。本文将逐步介绍如何为HTML表格添加样式，并提供实际案例。

1. 基本表格结构​

在开始样式化之前，我们先回顾一下HTML表格的基本结构。一个简单的表格通常由 <table>、<tr>、<th> 和 <td> 标签组成。

html
<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>

默认情况下，这个表格看起来非常简单，没有边框或背景色。

2. 添加边框​

首先，我们可以为表格添加边框。使用CSS的 border 属性可以为表格、表头和单元格添加边框。

css
table, th, td {
  border: 1px solid black;
}

将上述CSS代码应用到表格后，表格将显示边框：

html
<table style="border: 1px solid black;">
  <tr>
    <th style="border: 1px solid black;">姓名</th>
    <th style="border: 1px solid black;">年龄</th>
    <th style="border: 1px solid black;">城市</th>
  </tr>
  <tr>
    <td style="border: 1px solid black;">张三</td>
    <td style="border: 1px solid black;">25</td>
    <td style="border: 1px solid black;">北京</td>
  </tr>
  <tr>
    <td style="border: 1px solid black;">李四</td>
    <td style="border: 1px solid black;">30</td>
    <td style="border: 1px solid black;">上海</td>
  </tr>
</table>
备注

注意：为了简化示例，我们在HTML中直接使用了内联样式。在实际开发中，建议将CSS代码放在外部样式表中。

3. 合并边框​

默认情况下，表格的边框是分开的。我们可以使用 border-collapse 属性将边框合并为单一边框。

css
table {
  border-collapse: collapse;
}

应用此样式后，表格的边框将合并为单一边框，看起来更加整洁。

4. 添加背景色​

为了增强表格的可读性，我们可以为表头和交替行添加背景色。

css
th {
  background-color: #f2f2f2;
}

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

应用此样式后，表头将显示浅灰色背景，偶数行将显示更浅的灰色背景。

5. 调整单元格内边距​

默认情况下，单元格的内容紧贴边框。我们可以使用 padding 属性为单元格添加内边距，使内容与边框之间有一定的距离。

css
th, td {
  padding: 10px;
}

应用此样式后，单元格的内容将与边框保持一定的距离，表格看起来更加舒适。

6. 对齐文本​

我们可以使用 text-align 属性将表格中的文本对齐到左侧、右侧或居中。

css
th, td {
  text-align: center;
}

应用此样式后，表格中的文本将居中对齐。

7. 实际案例​

以下是一个完整的HTML表格样式示例：

html
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<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>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

8. 总结​

通过使用CSS，我们可以轻松地为HTML表格添加样式，使其更具可读性和美观性。本文介绍了如何为表格添加边框、合并边框、添加背景色、调整内边距和对齐文本。希望这些技巧能帮助你在实际项目中创建更美观的表格。

9. 附加资源与练习​

  • 练习：尝试为表格添加更多的样式，例如悬停效果、圆角边框等。
  • 资源：参考 MDN Web Docs 了解更多关于HTML表格的详细信息。
提示

提示：在实际开发中，建议使用CSS框架（如Bootstrap）来快速创建样式化的表格。