如何用CSS设计表格的样式-一一网

作者选择了 “科技多样性基金“作为 “为国家而写“计划的一部分来接受捐赠。

简介

表格在网络上有一个漫长而复杂的历史。在CSS出现之前，<table> 元素是在网络上创建丰富设计布局的唯一可能途径。但是，用<table> 创建布局并不是它的初衷或理想用途。现在有了更好的布局选项，开发者可以使用<table> 元素来呈现预定的表格数据，就像电子表格一样。这使得_语义化的HTML_成为可能，或者说，使用HTML元素要与它们的预期含义相一致。

格式良好的HTML向浏览器提供信息，并允许浏览器为用户提供最佳界面。虽然本教程将侧重于表格的视觉方面的造型，但有效的表格HTML确保所有用户，包括视力好的、视力不好的和有其他情况的用户，都能浏览和理解表格信息。按规定使用<table> 元素可以大大增加你的CSS设计的可访问性。

在本教程中，你将运行一个为<table> 元素定型的例子。本教程的前半部分将关注一个普通的表格布局，它主要使用浏览器对表格元素的默认样式。浏览器默认样式是使用CSS的起点，所以知道它们是什么很重要。下半部分将对表格进行重构，使其在每个部分使用独特的样式。在本教程结束时，你将建立一个表格，为X轴和Y轴的表格标题提供独特的样式，交替使用行的颜色，为表格提供清晰的标题，并突出数据点，如下图所示。

Table of financial information with custom style that renders a sans-serif font, a black header row, blue row headers, and different shading values for each row.

先决条件

对CSS的级联和特异性功能有所了解，你可以通过阅读《如何用级联和特异性将CSS样式应用于HTML》来了解。
对类型选择器、组合选择器和选择器组的了解，你可以在《如何用CSS选择HTML元素的样式》中找到。
在你的本地机器上保存一个空的HTML文件，即index.html ，你可以从你选择的文本编辑器和网络浏览器中访问。要开始学习，请查看我们的《如何设置你的HTML项目》教程，并按照《如何使用和理解HTML元素》的说明，在浏览器中查看你的HTML。如果你是HTML的新手，可以试试整个《如何用HTML建立网站》系列。

设置`<table>` HTML

在你可以为一个<table> ，你需要一个工作的对象。在一个<table> 元素中，有许多可能存在的元素。<table> 元素是HTML语义的最好例子之一，因为它只有在里面有与表格相关的下级元素时才会发挥作用。在这一步中，你将创建一个<table> 元素，并在其中填充示例数据。

要开始，在你的文本编辑器中打开index.html ，并在下面的代码块中添加HTML。

index.html

<!doctype>
<html>
  <head>
    <title>2019 Fourth Quarter Report</title>
    <link href="styles.css" rel="stylesheet" media="all" />
  </head>
  <body>
    <table>
    </table>
  </body>
</html>
复制代码

从这一步开始，你将添加的所有HTML都将放在<table> 元素中。<table> 元素本身只定义了表格的内容区域，而且必须在其内部有特定的元素才能正常工作。<link> 元素引用了你稍后要添加的styles.css 文件，并将CSS加载到页面上以生成样式。media 属性指定了内容是为什么设备制作的。在本例中，你把它设置为all ，因为这是针对所有设备类型的。

首先，你要在<table> 元素中添加<caption> 元素，里面有2019年第四季度报告的文字。在文本编辑器中的index.html 文件中，添加以下代码块中的高亮HTML。

index.html

...
<table>
  <caption>2019 Fourth Quarter Report</caption>
</table>
...
复制代码

<caption> 包含表格的名称或描述。请确保在你的表格中包括这个元素，因为它为使用辅助技术的人提供了有用的信息，如屏幕阅读器。把<caption> 元素看作是<table> 的<title> ，可能会有帮助。

接下来，添加<thead> ，然后是<tbody> 元素，作为<caption> 元素的同级元素，如下一个代码块中的高亮HTML所示。

index.html

...
<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead></thead>
  <tbody></tbody>
</table>
复制代码

<thead> 元素相当于<header> 的<table> ，它为标题信息定义了一个上下文。像<thead> ，<tbody> 元素定义了表格内容所在的区域。在这两种情况下，它们都定义了一个区域，但它们本身并不显示内容。虽然在这个例子中没有使用，但<tfoot> 元素的存在是为了提供摘要信息，如总数。

HTML中的表格是由行而不是列建立的。表格的每个单元格都包含在一个<tr> 元素中。这些元素通常是<thead>,<tbody>, 和<tfoot> 的后裔，但如果不使用区域元素，也可以是<table> 的直接后裔。

回到文本编辑器中的index.html ，在正文中添加一个单一的标题行和三行内容，如下面的代码块所强调的那样。

index.html

...
<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    <tr></tr>
  </tbody>
</table>
...
复制代码

最后两个元素的功能相似，都是<table> HTML结构中的最后一个元素，也就是说，与前面的元素不同，这些元素可以包含非表格元素。

<td> 元素包含各个表格的数据点。<th> 定义内容为某行或某列的标题。表格元素对HTML来说是独一无二的，因为它们的标记结构与视觉结构直接相关。当把表格看作是一个电子表格时，<th> 和<td> 元素的行为就像单元格。为了在这个表中有四列，每个<tr> 需要有不多于和不少于四个<td> 或<th> 元素。根据数据的内容，这可能意味着有一个空白的<th> 或<td> 元素。使用一个HTML注释来解释一个元素是故意留空的，这可能会有帮助。

将下面代码块中突出显示的HTML添加到你的index.html 文件中。

index.html

...
<table>
  <caption>2019 Fourth Quarter Report</caption>
  <thead>
    <tr>
      <th><!-- Intentionally Blank --></th>
      <th>October</th>
      <th>November</th>
      <th>December</th>
    <tr>
  </thead>
  <tbody>
    <tr>
      <th>Projected</th>
      <td>$820,180</td>
      <td>$841,640</td>
      <td>$732,270</td>
    </tr>
    <tr>
      <th>Actual</th>
      <td>$850,730</td>
      <td>$892,580</td>
      <td>$801,240</td>
    </tr>
    <tr>
      <th>Utilization</th>
      <td>83%</td>
      <td>90%</td>
      <td>75%</td>
    </tr>
  </tbody>
</table>
...
复制代码

**注意：**与电子表格软件一样，有时可能需要合并单元格，比如一个单元格占了两列。这是有可能做到的，但只能在单元格上使用HTML属性，而不能使用CSS。在处理更复杂的表格时，必须牢记这一点。

现在你已经写好了你的表格，保存文件。然后，在你的网络浏览器中打开index.html 。下图描述了该表的浏览器默认样式在Firefox网络浏览器中加载时的样子。

Information arranged into a table, but with no dividing lines and with default serif font.

在本节中，你为表格数据设置了HTML。你了解了一个表格是如何由一系列元素按照不同的顺序组合而成的，以创建一个可访问的数据集。接下来，你将使用border 和border-collapse 属性，开始为表格应用样式。

使用`border` 和`border-collapse` 来创建初始表样式

为表格设计样式的第一步是了解一些浏览器的默认样式和行为。本节将介绍border 属性和border-collapse 属性，并展示如何在单元格之间创建边界线。

要开始设计表格的样式，在文本编辑器中创建并打开一个名为styles.css 的文件，与index.html 在同一文件夹中。添加一个选择器组，包括一个th 元素选择器和一个td 元素选择器。然后，在选择器块中，添加一个值为1px solid black 的border 属性，如以下代码块所示。

styles.css

th, td {
  border: 1px solid black;
}
复制代码

保存你对styles.css 的修改，然后在你的网络浏览器中打开index.html 。这里将不再是一个有凝聚力的网格，而是几个有自己边框的方框。下面的图片描述了表格在网络浏览器中的显示方式。

Default borders separated table with borders style of 1px black solid.

要改变这个默认值，在你的文本编辑器中返回到styles.css ，并在文件的顶部添加一个table 元素选择器。然后，在选择器块中，应用border-collapse 属性。这个属性的默认值是separate ，但在这里你要把它改成一个值collapse 。这就消除了表格单元格之间的间距，使边框重叠。在下面的代码块中，高亮显示的CSS指出了要添加到你的styles.css 文件中的内容。

styles.css

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}
复制代码

打开你的网络浏览器，刷新index.html 。现在，该表将有一个由多条交叉黑线定义的网格。下面的图片描述了边框在你的浏览器中的表现。

Table with no space between cells and a border style of 1px black solid.

在这一节中，你用border 属性在每个表格单元上应用边框，并使用th 和td 元素选择器。你还了解到，默认情况下，表格单元格是由一个空格隔开的。你使用border-collapse 属性应用于table 元素选择器和collapse 属性来删除表格单元之间的空间。在下一节，你将使用padding 和width 属性来定义表格的大小。

设置表格的大小

接下来，你将为表格单元格添加一些间距，使数据更易读。为了解决给表格单元格添加空白空间并使表格更加平衡，本节将重点讨论width 和padding 属性。

到目前为止，每个单元格的内容都是成束的，边框就在内容的上面。你可能还注意到，表格的宽度只和它的内容一样。<table> 有自己的显示属性：display: table 。为了使表格达到父容器的全部宽度，可以在table 选择器上添加一个width: 100% 。

由于这是一个相对较小的表格，在<table> 元素上添加一个width 属性是没有必要的。相反，在你的文本编辑器中打开styles.css ，并添加一个由thead th 组成的组合器选择器，它将对<thead> 元素内的<th> 元素进行样式范围。然后，添加一个值为25% 的width 属性，如下面代码块中的高亮部分所示。

styles.css

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

thead th {
  width: 25%;
}
复制代码

由于这个表格有四列，你可以通过应用width: 25% ，给每一列一个相等的宽度。只有每列的第一个单元格需要被设置，因此thead th 选择器。一个单元格的宽度决定了该列中所有单元格的宽度。

在保存对styles.css 的修改后，返回浏览器并刷新index.html 。现在该表将有四列相同的宽度，如下图所示。

Set equal column widths

**注意：**如果你希望每一列都有不同的宽度，请将一个特定的类应用于该列中的每个th 。然后，使用这些类，设置你想要的宽度。

现在，各列的宽度相等，每个单元格的内容可以通过使用padding 属性在里面多留一些空间。与width 属性不同，在单元格内应用空间需要针对所有th 和td 单元格元素。

在文本编辑器中打开styles.css ，为th, td 的组选择器添加一个padding 属性，然后给它的值为8px 。以下代码块中的高亮行表示了必要的改变。

styles.css

...
th, td {
    border: 1px solid black;
    padding: 8px;
}

thead th {
  width: 25%;
}
复制代码

保存你对styles.css 的修改，然后在浏览器中刷新index.html 。8px 填充物被添加到每个单元格的每一侧，提供空间，使表格数据更加清晰易读。下面的图片描述了在浏览器中的显示效果。

Adding space within cells.

**注意：**表格单元格的盒子模型是通常模型的一个异类，它不承认margin 属性。

在本节中，你将每一列的width 属性设置为相等，并使用padding 属性为每个单元格增加了间距，以使数据更容易阅读。在下一节中，你将使用一个类来定位和设计一个特定的表格单元。

锁定一个特定的表格单元

在这一步中，我们的目标是在视觉上突出表格中的一个单元格。你将在HTML中应用一个类名，然后使用一个类选择器和background-color 属性来创建高亮效果。

首先，在你的文本编辑器中打开index.html ，在<td> 元素中添加一个class 属性，里面有90%的文本。让class 属性的值为cell-highlight ，如下面代码块的高亮显示的HTML所示。

index.html

<table>
  ...
  <tr>
    <th>Utilization</th>
    <td>83%</td>
    <td class="cell-highlight">90%</td>
    <td>75%</td>
  </tr>
  ...
</table>
复制代码

保存你对index.html 的修改，然后在你的文本编辑器中打开styles.css 。在文件的末尾添加一个类选择器：.cell-hightlight 。在选择器块内，添加一个background-color 属性，其值为gold 。接下来，添加一个font-weight 属性，其值设置为bold 。下面代码块中突出显示的CSS演示了这一格式。

styles.css

...
thead th {
  width: 25%;
}

.cell-highlight {
  background-color: gold;
  font-weight: bold;
}
复制代码

保存你对styles.css 的修改，然后返回网页浏览器，刷新index.html 。如下图所示，内容为**90%**的表格单元格现在有一个深黄色的背景和一个粗体字的重量。

A table with gold highlighting on a specific cell.

现在你已经在一个特定的表格单元格上使用了一个类选择器，使用background-color 和font-weight 属性来应用高亮样式。接下来，你将改变边框位置、字体和文本对齐方式，使这些样式朝着表格的最终外观发展。

设置表格的字体家族

为了开始向表格的最终风格发展，你将把边框移到整个表格周围，而不是单个单元格。然后，你将为页面设置一个新的默认font-family ，并调整各个单元格的默认文本对齐方式。

要更新边框，在你的文本编辑器中打开styles.css 。然后，编辑现有的组选择器th, tr ，删除border: 1px solid black; 属性和值。这将删除表格中的单元格边框；在表格样式的第二阶段，填充将保持不变。然后，在table 类型选择器上，添加一个border 属性，其值为1px solid black 。下面的代码块演示了这将如何出现在你的代码中。

styles.css

table {
  border-collapse: collapse;
  border: 1px solid black;
}

th, td {
  padding: 8px;
}
...
复制代码

保存你对styles.css 的修改，并返回你的浏览器刷新index.html 。现在，边框将环绕整个表格，而不是单个表格单元，如下图所示。

Table with a black border around the whole table but with no borders between the individual cells.

要改变整个文档的字体，请回到文本编辑器中的styles.css 。在table 选择器块之前，添加一个body 类型选择器。在body 选择器块中，添加font-family 属性，其值为sans-serif 。这将把页面的字体设置为浏览器的默认无衬线字体，如Helvetica或Arial。以下代码块中高亮的CSS表示对styles.css 的修改。

styles.css

body {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 1px solid black;
}
...
复制代码

保存这些修改到styles.css ，然后在浏览器中重新加载index.html 。现在整个表格的字体将采用浏览器默认的无衬线字体，如下图所示。

Table with all the default serif font changed to the default sans-serif font.

最后，要调整表格内容的对齐方式，在文本编辑器中返回styles.css 。浏览器通常默认内容的对齐方式为左上角位置。与电子表格应用程序中的内容对齐类似，表格可以将内容对齐到表格单元格的中间，而不考虑行高。

要设置水平中间对齐，请进入table 类型选择器，添加text-align 属性，其值为center 。然后，要设置垂直中间对齐，添加vertical-align 属性，值为middle 。以下代码块的高亮部分演示了如何将其添加到styles.css 。

styles.css

body {
  font-family: sans-serif;
}

table {
    border-collapse: collapse;
    border: 1px solid black;
    text-align: center;
    vertical-align: middle;
}
...
复制代码

保存你对styles.css 的修改，然后返回网页浏览器重新加载index.html 。现在，单元格内容将在水平和垂直方向上居中。请注意，<th> 单元格的间距没有改变。这是因为表头的文本默认是居中的。

垂直居中在内容上不会立即显现出来，但如果一个单元格的内容包到第二行，该行的其余单元格将垂直对齐其内容。

下图显示了这种情况在浏览器中的表现。

Table with the contents of each cell horizontally and vertically centered within the cell.

在这一节中，你把边框属性从表格单元格移到了整个表格上。你还为页面设置了一个新的字体家族，并改变了表格单元格内容的默认对齐方式。在下一节中，你将为表格的<caption> 元素添加样式，并进一步了解其用途。

表格标题的样式

<caption> 元素为有视力和无视力的读者提供了表格的上下文，并显示在表格的上方，无论<caption> 在<table> 元素中处于什么位置。对于屏幕阅读器和盲文用户来说，<caption> 提供了清晰的表的用途的上下文，特别是当一个页面上有多个表的时候。

由于<caption> 是一个只出现在<table> 元素内的元素，它可以用caption 类型选择器进行样式设计。caption 的默认值是文本居中，有一个继承的大小、家族和普通的权重。

要开始改变<caption> 元素的样式，在你的文本编辑器中打开styles.css 。在table 选择器之后添加一个caption 选择器，以保持你的CSS有一个合理的流程。然后，使用font-weight,font-size,text-align, 和color 属性，创建一个大的、粗体的、左对齐的、深灰色的标题。下面代码块中突出显示的CSS演示了这一格式。

styles.css

table {
  border-collapse: collapse;
}

caption {
  font-weight: bold;
  font-size: 24px;
  text-align: left;
  color: #333;
}


th, td {
  border: 1px solid black;
  padding: 8px;
}
...
复制代码

保存你对styles.css 的修改，并在浏览器中重新加载index.html 。如下图所示，标题内容现在大得多，而且是粗体字，为表格创建了一个标题。

Table with caption left-aligned and bolded as the title.

接下来，在caption 和table 的视觉部分之间需要一些空间。在文本编辑器中返回styles.css ，为caption 添加额外的间距。

caption 可以接受margin 和padding 的间距属性。由于间距只需要在caption 下方，所以在选择器块中添加一个margin-bottom 属性，其值为16px 。下面代码块的高亮行显示了如何应用这个。

styles.css

caption {
    font-weight: bold;
    font-size: 24px;
    text-align: left;
    color: #333;
    margin-bottom: 16px;
}
复制代码

保存你对styles.css 的修改，并在网页浏览器中刷新index.html 。现在caption ，在文本和表格之间有更多的空间，如下图所示。

Table with space between the caption and the table itself.

在本节中，你为表格的<caption> 元素创建了自定义样式。你还了解到，<caption> 是一个重要的元素，为使用辅助技术阅读表格的人提供信息背景。在下一节中，你将对表的顶部标题行应用样式。

为顶部行的标题单元格设计样式

接下来，你将为顶行的标题应用样式。<thead> 元素将包含顶行，所以所有的样式都可以直接应用于该元素。其目的是创建一个深灰色的背景和白色的大写字母文本。

要开始，在你的文本编辑器中打开styles.css 。创建一个新的thead 类型选择器。在选择器块中，添加一个background-color 属性，其值为#333 ，这将创建深灰色的颜色。然后，添加一个color 属性，值为white 。

styles.css

...
caption {
  font-weight: bold;
  font-size: 24px;
  text-align: left;
  color: #333;
  margin-bottom: 16px;
}

thead {
  background-color: #333;
  color: white;
}
...
复制代码

保存你对styles.css 的修改，并在浏览器中刷新index.html 。现在，顶部的标题行在视觉上是独特的，有一个纯黑色的背景和白色的粗体文字。下面的图片显示了这在浏览器中的显示效果。

Table with the table header row in dark gray with white lettering.

接下来，为了增加顶部标题的美感，在文本编辑器中返回styles.css 。通过添加一个值为0.875rem 的font-size 属性来改变文本的大小，这将使字体大小降低一点。然后，为了使所有字母都变成大写字母，添加一个text-transform 属性，值为uppercase 。最后，为了让字母之间有一些空间，使用letter-spacing 属性，并将其值设置为2% 。这将在大写字母之间创造足够的空间，使它们不至于拥挤在一起，从而使它们更容易阅读。

下面代码块中的高亮CSS演示了如何格式化这些样式。

styles.css

thead {
    background-color: #333;
    color: white;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 2%;
}
复制代码

保存你对styles.css 的修改，然后返回浏览器刷新index.html 。如下图所示，现在的文本是大写字母，尺寸比单元格内容小一点，但作为标题，层次清晰。

Table with header row lettering changed to uppercase and adjusted for spacing.

在这一步中，你使用了几个属性来为顶部的标题行提供一个可识别的样式。表格中这一部分的HTML已经可以为非视力正常的技术用户所用。现在，视觉样式提供了更多的背景信息。接下来，你将继续通过添加交替的行颜色来进行视觉辅助工作。

在表格中添加条纹行的样式

接下来，为了创建交替的条纹颜色，你将需要使用所谓的伪类选择器。有各种类型的伪类，在这种情况下，你将使用:nth-child() 伪类。:nth-child 后面的括号可以接受各种数字和单词值，以创建一个交替的样式，包括odd 和even 的值。

要开始，在你的文本编辑器中打开styles.css 。:nth-child() 伪类的作用是将其应用于同级元素。在这种情况下，这将是<tbody> 内的<tr> 元素。为了创建第一个值，写一个tbody tr 组合器选择器，紧接着写:nth-child(odd) 伪类。在这个选择器块中，将background-color 属性设置为#fff ，即白色的十六进制速记符号。然后以同样的格式创建另一个选择器，但使用even ，而不是odd ，并将该background-color 属性设置为浅灰色的#eee 值。

以下代码块中突出显示的CSS展示了这将在你的文本编辑器中出现。

styles.css

...
.cell-highlight {
  background-color: gold;
  font-weight: bold;
}

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

tbody tr:nth-child(even) {
  background-color: #eee;
}
复制代码

保存你对styles.css 的修改，然后在浏览器中返回到index.html ，并刷新页面。第二行现在将有一个浅灰色的背景，虽然它看起来没有什么不同，但奇数行现在有一个定义的白色背景，而不是默认的透明背景。当你添加行时，这些样式将从白色到浅灰色交替出现。下面的图片演示了这将在浏览器中出现的情况。

Table with alternating rows of white and gray background colors.

在本节中，你使用了:nth-child() 伪类，在表格的主体部分创建了交替的行颜色。在本教程的最后一节中，你将把前两节学到的知识搭配起来，为表格左侧的行标题创建自定义样式。

左侧标题单元格的样式

这个表格的最后一个样式是为表格左侧的Y轴标题添加蓝色背景。这将分两部分进行：第一部分将与顶部标题行的样式设计部分类似，针对每一行的th 单元。然后，你将使用上一节中相同的:nth-child() 伪类的方法来创建一个颜色转换。

为了应用蓝色主背景，在文本编辑器中打开你的styles.css 文件。你需要针对<tbody> 中的<th> 元素，这样<thead> 中的<th> 元素就不会得到这些样式。创建一个tbody th 的组合器选择器，然后给它一个background-color 的属性和#36c 的值。应用一个color 属性，其值为#fff 或white 。最后，为了将文本设置为左对齐，添加一个text-align 属性，其值为left 。

styles.css

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

tbody th {
  background-color: #36c;
  color: #fff;
  text-align: left;
}
复制代码

保存你的改动到styles.css ，然后在浏览器中刷新index.html 。如下图所示，现在的行标题是独特的蓝色和白色文本。

Table with left-most column in blue with white lettering.

最后，为了将交替的行颜色延续到行标题中，在文本编辑器中返回到styles.css 。为了达到与数据行相同的效果，你将需要一个:nth-child() 伪类选择器。由于在tbody th 组合器选择器上已经设置了蓝色背景，你只需要:nth-child(even) ，调整为较深的蓝色。然而，由于:nth-child() 伪类选择器的工作方式，你仍然需要将其应用于<tr> 元素，而不是<th> 元素，因为行(tr)计数是实现效果的方式。这将需要一个更复杂的组合器选择器，即tbody tr:nth-child(even) th ，并将background-color 属性设置为#25c 。

下面的代码块强调了这个CSS的格式。

styles.css

...
tbody th {
  background-color: #36c;
  color: #fff;
  text-align: left;
}

tbody tr:nth-child(even) th {
  background-color: #25c;
}
复制代码

保存你的修改到styles.css ，然后最后一次回到你的浏览器，刷新index.html 。现在，样式设计已经完成，行头和数据的颜色交替出现，如下图所示。

Table with alternating shades of blue in the left-most column to match the rest of the table.

在这一节中，你将样式的范围扩大到了行标题，并延续了前几节中所学到的内容，以准确地确定交替的背景颜色。

总结

你现在已经成功地建立了一个表格，并学会了几种实用的CSS属性和选择器类型来应用于表格数据。展望未来，你可以制作更复杂的表格，将这些概念进一步推广。你还可以使用nth-child 选择器，在子弹列表或导航链接上创建交替的样式。HTML表格对于展示各种表格数据非常有用，而HTML和CSS的能力允许大量的表格类型。

如果你想阅读更多的CSS教程，可以试试《如何用CSS为HTML定型》系列中的其他教程。

文章版权归作者所有，未经允许请勿转载。

THE END

阅读