CSS 表

CSS 表是网页设计中经常使用的元素之一。它们提供一个易于理解和处理数据的方式，用于呈现各种信息。

HTML 表格

在了解如何使用 CSS 样式表美化表格之前，让我们来看一下 HTML 表格的结构：

<table>
  <thead> <!-- 表头 -->
    <tr> <!-- 表头行 -->
      <th>表头单元格1</th>
      <th>表头单元格2</th>
      <th>表头单元格3</th>
    </tr>
  </thead>
  <tbody> <!-- 表身 -->
    <tr> <!-- 数据行1 -->
      <td>数据单元格1</td>
      <td>数据单元格2</td>
      <td>数据单元格3</td>
    </tr>
    <tr> <!-- 数据行2 -->
      <td>数据单元格1</td>
      <td>数据单元格2</td>
      <td>数据单元格3</td>
    </tr>
  </tbody>
  <tfoot> <!-- 表尾 -->
    <tr> <!-- 表尾行 -->
      <th>表尾单元格1</th>
      <th>表尾单元格2</th>
      <th>表尾单元格3</th>
    </tr>
  </tfoot>
</table>

CSS 样式表

有了上面的 HTML 结构，我们可以使用 CSS 样式表来美化表格。以下是一些样式可以用来装饰表格：

table {
  border-collapse: collapse; /* 合并边框 */
  width: 100%; /* 宽度 */
  text-align: left; /* 文本对齐方式 */
}

th,
td {
  border: 1px solid #ddd; /* 边框样式 */
  padding: 8px; /* 内边距 */
}

th {
  background-color: #f2f2f2; /* 背景色 */
  font-weight: bold; /* 字体加粗 */
}

tr:nth-child(even) {
  background-color: #f2f2f2; /* 偶数行背景色 */
}

tr:hover {
  background-color: #ddd; /* 鼠标悬停时的背景色 */
}

使用上述样式之后，我们的表格看起来将更加美观和易于阅读。

结论

在网站设计过程中，表格是必不可少的部分。通过使用 CSS 样式表，我们可以美化表格，使其更加易于理解和处理数据。