表格样式

为 HTML 表格设置样式并不是世界上最迷人的工作，但有时我们都不得不做。本文解释了如何使 HTML 表格看起来美观，并突出了一些特定的表格样式技术。

预备知识	基本 HTML 语法和HTML 表格，CSS 值和单位以及大小调整。
学习成果	处理表格中的间距，包括边框折叠。清晰突出显示不同的表格区域，包括标题、表头、表体和表尾。如何实现斑马条纹，以及为什么它很有用。

一个典型的 HTML 表格

让我们从一个典型的 HTML 表格开始。嗯，我说典型——大多数 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 Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>
    <tr>
      <th scope="row">The Damned</th>
      <td>1976</td>
      <td>10</td>
      <td>Smash it up</td>
    </tr>
    <tr>
      <th scope="row">Sex Pistols</th>
      <td>1975</td>
      <td>1</td>
      <td>Anarchy in the UK</td>
    </tr>
    <tr>
      <th scope="row">Sham 69</th>
      <td>1976</td>
      <td>13</td>
      <td>If The Kids Are United</td>
    </tr>
    <tr>
      <th scope="row">Siouxsie and the Banshees</th>
      <td>1976</td>
      <td>11</td>
      <td>Hong Kong Garden</td>
    </tr>
    <tr>
      <th scope="row">Stiff Little Fingers</th>
      <td>1977</td>
      <td>10</td>
      <td>Suspect Device</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>

得益于scope、<caption>、<thead>、<tbody>等特性，该表格标记良好，易于样式化且易于访问。不幸的是，它看起来不怎么样。只有默认的浏览器样式，它显得局促、难以阅读，而且有点无聊

我们需要使用一些 CSS 来解决这个问题。你可以使用 CSS 随意地为表格设置样式。例如，我们创建了这个相当“朋克”风格的设计

/* font import */
@import "https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap";

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

thead th {
  line-height: 1.5;
}

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;
}

/* typography */
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;
}

/* graphics */
thead,
tfoot {
  background: url("https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/leopardskin.jpg");
  color: white;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
  border: 3px solid purple;
  text-shadow: 1px 1px 1px black;
}

tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

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

tbody tr {
  background-image: url("https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/noise.png");
}

table {
  background-color: #ff33cc;
}

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

然而，这个设计相当花哨。在本文中，我们将引导您使用表格设计的一些最佳实践进行标记——如Web Typography: designing tables to be read not looked at中所述。

开始为我们的表格设置样式

让我们一起为我们的表格示例设置样式。

首先，将前面显示的示例标记复制到本地，并将其保存在本地计算机上的某个工作目录中。
接下来，创建一个名为style.css的新文件，并将其保存在与您的其他文件相同的目录中。
将以下 HTML 代码行放置在您的<head>中，将 CSS 链接到 HTML
html
```
<link href="style.css" rel="stylesheet" />
```

将您的 HTML 加载到浏览器中，查看其默认外观。

更新字体

这是一个小点，与表格样式没有严格关系，但我们认为默认字体对于关于朋克乐队的表格来说有点过于正式。通过添加以下规则来开始您的 CSS

css

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

间距

我们需要对表格做的第一件事是整理间距——默认的表格样式太局促了！为此，请将以下 CSS 添加到您的style.css文件的底部

css

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
}

th,
td {
  padding: 0.6em;
}

最重要的部分如下

通常，在表格上设置table-layout值为fixed是个好主意，因为它使表格默认行为更可预测。通常，表格列的大小往往根据其包含的内容量来确定，这会产生一些奇怪的结果。使用table-layout: fixed，您可以根据标题的宽度来设置列的大小，然后根据需要处理其内容。Chris Coyier 在Fixed Table Layouts中更详细地讨论了这项技术。
我们将固定布局与90%的width和10px auto的margin结合起来。这些设置意味着表格将大部分填充视口并水平居中。
对于任何表格样式工作来说，将border-collapse设置为collapse都是标准的最佳实践。默认情况下，当您在表格元素上设置边框时，它们之间都会有间距，如下图所示：这看起来不太美观（尽管这可能是您想要的效果，谁知道呢？）。设置了border-collapse: collapse;后，边框会折叠成一个，看起来好得多：
我们为<th>和<td>元素设置了一些padding——这给了数据项一些“呼吸”空间，使表格看起来更清晰易读。

保存您的代码并刷新浏览器以查看结果。

对齐

接下来，我们将处理单元格中不同类型数据的对齐方式。最佳实践要求文本左对齐，数字右对齐；以下 CSS 将实现这一点，现在将其添加到 CSS 文件的底部。

css

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
  width: 15%;
}

tr :nth-child(1),
tr :nth-child(4) {
  text-align: left;
  width: 35%;
}

tfoot tr :nth-child(1) {
  text-align: right;
}

tfoot tr :nth-child(2) {
  text-align: left;
}

我们在这里使用了:nth-child伪类；这是一个有用的选择器，允许您选择元素的特定编号子元素，或特定序列。在这里，我们使用它来选择元素内部特定的<td>元素。

注意我们还为表格行设置了特定的宽度，其中包含文本的行比包含数字的行宽得多。这是一个好主意——包含更多内容的行需要更多空间，以尽可能让其内容显示在一行上。包含较少内容的行不需要那么多空间来显示数据，事实上，如果您给它们很多空间，数据会有点迷失在空间中，因此更难阅读。

我们还应该确保数据项与其单元格的顶部对齐，而不是居中。为了实现这一点，我们可以使用vertical-align属性。将您现有的th, td规则更新为以下内容

css

th,
td {
  vertical-align: top;
  padding: 0.3em;
}

再次，保存并刷新以查看最新 CSS 更新的效果。

添加边框

表格已经看起来好多了，但我们应该添加一些边框，以在表格的<caption>、数据和底部的总计行之间提供视觉分隔。为此，请将以下规则添加到您的 CSS 中

css

tfoot {
  border-top: 1px solid #999999;
}

接下来，将您现有的table规则更新为以下内容

css

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

保存并刷新；您的表格现在应该开始变得非常易读了！

斑马条纹

我们想专门用一个部分向您展示如何实现**斑马条纹**——交替颜色的行，使表格中不同的数据行更易于解析和阅读。将以下 CSS 添加到您的style.css文件底部

css

tbody tr:nth-child(odd) {
  background-color: #eeeeee;
}

早些时候您看到:nth-child选择器用于选择特定的子元素。它也可以将公式作为参数，因此它将选择一系列元素。公式2n+1将选择所有奇数子元素（1、3、5等），公式2n将选择所有偶数子元素（2、4、6等）。我们在代码中使用了odd关键字，它是2n+1公式的快捷方式（even是2n的缩写）。

同样，别忘了保存并刷新以查看结果。

为标题设置样式

我们的表格还有最后一件事要做——设置标题样式。为此，请将以下内容添加到您的style.css文件底部

css

caption {
  padding: 1em;
  font-style: italic;
  caption-side: bottom;
  letter-spacing: 1px;
}

这里没有什么特别之处，除了caption-side属性，它被赋予了bottom值。这会导致标题位于表格的底部。

完成的表格

您完成的表格设计应该如下图所示

html {
  font-family: "Helvetica", "Arial", sans-serif;
}

table {
  table-layout: fixed;
  width: 90%;
  margin: 10px auto;
  border-collapse: collapse;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}

th,
td {
  vertical-align: top;
  padding: 0.6em;
}

tr :nth-child(2),
tr :nth-child(3) {
  text-align: right;
  width: 15%;
}

tr :nth-child(1),
tr :nth-child(4) {
  text-align: left;
  width: 35%;
}

tfoot tr :nth-child(1) {
  text-align: right;
}

tfoot tr :nth-child(2) {
  text-align: left;
}

tfoot {
  border-top: 1px solid #999999;
}

tbody tr:nth-child(odd) {
  background-color: #eeeeee;
}

caption {
  padding: 1em;
  font-style: italic;
  caption-side: bottom;
  letter-spacing: 1px;
}

表格样式快速提示

在继续之前，我们认为为您提供一个上面最有用要点的快速列表

使您的表格标记尽可能简单，并保持灵活性。
使用table-layout: fixed创建更可预测的表格布局，通过在表头 (<th>) 上设置width来轻松设置列宽。
使用border-collapse: collapse使表格元素边框相互折叠，产生更整洁、更容易控制的外观。
使用<thead>、<tbody>和<tfoot>将表格分解为逻辑块，并提供额外的应用 CSS 的位置，以便在需要时更容易分层样式。
使用斑马条纹使交替行更易于阅读。
使用text-align对齐您的<th>和<td>文本，使内容更整洁、更易于理解。

总结

现在表格样式已经完成，我们需要一些其他事情来打发时间。下一篇文章探讨了 CSS 调试——如何解决布局看起来不正确或属性没有按预期应用等问题。这包括使用浏览器开发工具来查找问题解决方案的信息。

帮助改进 MDN

了解如何贡献

此页面最后由MDN 贡献者在2025 年 10 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题