CSS 样式化表格：从基础到高级技巧

时间：2025-02-01 16:46:34

CSS 样式化表格：从基础到高级技巧

    • 1. 典型的 HTML 表格结构
    • 2. 为表格添加样式
      • 2.1 间距和布局
      • 2.2 简单的排版
      • 2.3 图形和颜色
      • 2.4 斑马条纹
      • 2.5 样式化标题
    • 3. 完整的示例代码
    • 4. 总结

在网页设计中，表格是展示数据的常见方式。然而，默认的表格样式通常显得单调且难以阅读。本文将详细介绍如何使用 CSS 为 HTML 表格添加样式，使其更加美观和易于理解。我们将通过一个完整的示例代码，逐步优化表格的外观。

1. 典型的 HTML 表格结构

让我们从一个典型的 HTML 表格开始。以下是一个展示英国著名朋克乐队信息的表格：

<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The *</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>
    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>

2. 为表格添加样式

2.1 间距和布局

首先，我们需要调整表格的间距和布局，使其更加清晰。我们将使用 table-layout: fixed 和 border-collapse: collapse 来控制表格的布局和边框。

/* 间距 */
table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}

2.2 简单的排版

接下来，我们为表格添加一些简单的排版样式，以提高可读性。

/* 排版 */
html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}

2.3 图形和颜色

为了让表格更具视觉吸引力，我们可以为表头和表尾添加背景图像和颜色。

/* 图形和颜色 */
thead,
tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
  border: 3px solid purple;
}

2.4 斑马条纹

为了增强表格的可读性，我们可以为表格的行添加斑马条纹效果。

/* 斑马条纹 */
tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

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

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}

2.5 样式化标题

最后，我们为表格的标题添加样式，使其更加突出。

/* 标题 */
caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}

3. 完整的示例代码

以下是完整的 HTML 和 CSS 代码，展示了如何样式化一个表格：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>样式化表格示例</title>
  <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css">
  <style>
    /* 间距 */
    table {
      table-layout: fixed;
      width: 100%;
      border-collapse: collapse;
      border: 3px solid purple;
    }

    thead th:nth-child(1) {
      width: 30%;
    }

    thead th:nth-child(2) {
      width: 20%;
    }

    thead th:nth-child(3) {
      width: 15%;
    }

    thead th:nth-child(4) {
      width: 35%;
    }

    th,
    td {
      padding: 20px;
    }

    /* 排版 */
    html {
      font-family: "helvetica neue", helvetica, arial, sans-serif;
    }

    thead th,
    tfoot th {
      font-family: "Rock Salt", cursive;
    }

    th {
      letter-spacing: 2px;
    }

    td {
      letter-spacing: 1px;
    }

    tbody td {
      text-align: center;
    }

    tfoot th {
      text-align: right;
    }

    /* 图形和颜色 */
    thead,
    tfoot {
      background: url(leopardskin.jpg);
      color: white;
      text-shadow: 1px 1px 1px black;
    }

    thead th,
    tfoot th,
    tfoot td {
      background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
      border: 3px solid purple;
    }

    /* 斑马条纹 */
    tbody tr:nth-child(odd) {
      background-color: #ff33cc;
    }

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

    tbody tr {
      background-image: url(noise.png);
    }

    table {
      background-color: #ff33cc;
    }

    /* 标题 */
    caption {
      font-family: "Rock Salt", cursive;
      padding: 20px;
      font-style: italic;
      caption-side: bottom;
      color: #666;
      text-align: right;
      letter-spacing: 1px;
    }
  </style>
</head>
<body>
  <table>
    <caption>
      A summary of the UK's most famous punk bands
    </caption>
    <thead>
      <tr>
        <th scope="col">Band</th>
        <th scope="col">Year formed</th>
        <th scope="col">No. of Albums</th>
        <th scope="col">Most famous song</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Buzzcocks</th>
        <td>1976</td>
        <td>9</td>
        <td>Ever fallen in love (with someone you shouldn't've)</td>
      </tr>
      <tr>
        <th scope="row">The *</th>
        <td>1976</td>
        <td>6</td>
        <td>London Calling</td>
      </tr>
      <tr>
        <th scope="row">The Stranglers</th>
        <td>1974</td>
        <td>17</td>
        <td>No More Heroes</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th scope="row" colspan="2">Total albums</th>
        <td colspan="2">77</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

4. 总结

通过本文的学习，你应该已经掌握了如何使用 CSS 为 HTML 表格添加样式。从调整间距和布局到添加斑马条纹和背景图像，CSS 提供了丰富的工具来美化表格。

相关文章