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

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

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

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

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

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

index.html

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

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

index.html

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

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

index.html

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

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

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

index.html

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

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

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

index.html

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

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

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

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

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

styles.css

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

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

styles.css

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

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

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

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

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

styles.css

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

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

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

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

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

styles.css

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

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

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

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

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

index.html

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

styles.css

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

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

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

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

styles.css

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

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

styles.css

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

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

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

styles.css

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

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

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

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

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

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

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

styles.css

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

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

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

styles.css

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

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

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

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

styles.css

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

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

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

styles.css

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

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

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

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

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

styles.css

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

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

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

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

styles.css

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

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

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

styles.css

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

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

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

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