如何使用CSS设置表格样式
作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。
介绍
表格在网络上有着悠久而复杂的历史。 在 CSS 存在之前，<table> 元素是在 Web 上创建丰富设计布局的唯一可能途径。 但是使用 <table> 创建布局并不是它的预期或理想用途。 现在有了更好的布局选项，开发人员可以使用 <table> 元素按预期呈现表格数据，就像电子表格一样。 这允许 语义 HTML，或使用与预期含义一致的 HTML 元素。
格式良好的 HTML 向浏览器提供信息，并允许浏览器为用户提供最佳界面。 虽然本教程将重点介绍表格样式的视觉方面，但有效的表格 HTML 可确保所有用户，包括有视力、无视力和其他情况的用户，都能够导航和理解表格信息。 按预期使用 <table> 元素可以大大提高 CSS 设计的可访问性。
在本教程中，您将运行一个设置 <table> 元素样式的示例。 本教程的前半部分将重点介绍一个常见的表格布局，该布局主要使用浏览器的默认表格元素样式。 浏览器默认值是使用 CSS 的起点，因此了解它们是什么很重要。 后半部分将重构表格，为每个部分使用独特的样式。 在本教程结束时，您将构建一个表格，该表格具有不同样式的 x 轴和 y 轴表格标题、交替的行颜色、表格的清晰标题和突出显示的数据点，如下图所示：
先决条件
- 了解 CSS 的级联和特异性特性，您可以通过阅读 How To Apply CSS Styles to HTML with Cascade and Specificity 获得。
- 类型选择器、组合选择器和选择器组的知识，您可以在 如何选择 HTML 元素以使用 CSS 设置样式 中找到这些知识。
- 在您的本地计算机上保存为
index.html的空 HTML 文件，您可以从您选择的文本编辑器和 Web 浏览器访问该文件。 要开始使用，请查看我们的 如何设置您的 HTML 项目 教程，并按照 如何使用和理解 HTML 元素 获取有关如何在浏览器中查看 HTML 的说明。 如果您是 HTML 新手，请尝试整个 如何用 HTML 构建网站系列。
设置 <table> HTML
在为 <table> 设置样式之前，您需要使用一个。 <table> 元素中可以存在许多可能的元素。 <table> 元素是 HTML 语义的最佳示例之一，因为它仅在其中包含与表格相关的后代元素时才有效。 在此步骤中，您将创建一个 <table> 元素并使用示例数据填充它。
首先，在文本编辑器中打开 index.html 并在以下代码块中添加 HTML：
索引.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 Fourth Quarter Report 的文本。 在文本编辑器的 index.html 文件中，添加以下代码块中突出显示的 HTML：
索引.html
... <table> <caption>2019 Fourth Quarter Report</caption> </table> ...
<caption> 包含表的名称或描述。 请务必在表格中包含此元素，因为它为使用辅助技术（例如屏幕阅读器）的人提供了有用的信息。 将 <caption> 元素视为 <table> 的 <title> 可能会有所帮助。
接下来，添加 <thead> 后跟 <tbody> 元素作为 <caption> 元素的同级元素，如下一个代码块中突出显示的 HTML 所示：
索引.html
... <table> <caption>2019 Fourth Quarter Report</caption> <thead></thead> <tbody></tbody> </table>
<thead> 元素是 <table> 等价于 <header> 并定义标题信息的上下文。 与 <thead> 类似，<tbody> 元素定义了表格内容所在的区域。 在这两种情况下，它们都定义了一个区域，但它们本身并不显示内容。 虽然在此示例中未使用，但存在 <tfoot> 元素以提供汇总信息，例如总计。
HTML 中的表格是由行而不是列构建的。 表格的每个单元格都包含在 <tr> 元素中。 这些元素通常是 <thead>、<tbody> 和 <tfoot> 的后代，但如果不使用区域元素，也可以是 <table> 的直接后代。
返回文本编辑器中的 index.html 以在正文中添加单个标题行和三行内容，如以下代码块中突出显示的那样：
索引.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 文件中：
索引.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 Web 浏览器 中加载此表格时的浏览器默认样式：
在本节中，您将为表格数据设置 HTML。 您了解了如何由一系列元素组成的表格，这些元素以不同的顺序组合以创建可访问的数据集。 接下来，您将使用 border 和 border-collapse 属性开始将样式应用于表格。
使用 border 和 border-collapse 创建初始表格样式
设置表格样式的第一步是了解一些浏览器默认样式和行为。 本节将介绍 border 属性和 border-collapse 属性，并展示如何在单元格之间创建边界线。
要开始设置表格样式，请在文本编辑器中创建并打开一个名为 styles.css 的文件，该文件与 index.html 位于同一文件夹中。 添加一个由 th 元素选择器和 td 元素选择器组成的选择器组。 然后，在选择器块中，添加一个值为 1px solid black 的 border 属性，如以下代码块所示：
样式.css
th, td {
border: 1px solid black;
}
将更改保存到 styles.css，然后在 Web 浏览器中打开 index.html。 而不是一个有凝聚力的网格，将有几个带有自己边框的框。 下图描述了表格在 Web 浏览器中的显示方式：
要更改此默认设置，请在文本编辑器中返回 styles.css 并将 table 元素选择器添加到文件顶部。 然后，在选择器块中，应用 border-collapse 属性。 此属性默认为 separate，但在这里您将其更改为 collapse 的值。 这将删除表格单元格之间的间距并导致边框重叠。 以下代码块中突出显示的 CSS 指示要添加到 styles.css 文件中的内容：
样式.css
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
打开您的网络浏览器并刷新 index.html。 表格现在将有一个由多条交叉黑线定义的网格。 下图描述了边框在浏览器中的显示方式：
在本节中，您使用 border 属性通过 th 和 td 元素选择器在每个表格单元格上应用边框。 您还了解到，默认情况下，表格单元格由空格分隔。 您使用 border-collapse 属性应用于 table 元素选择器和 collapse 属性来删除表格单元格之间的空间。 在下一节中，您将使用 padding 和 width 属性来定义表格的大小。
设置表格的大小
接下来，您将在表格单元格中添加一些间距，以使数据更具可读性。 为了解决在表格单元格中添加空白并使表格更加平衡的问题，本节将重点介绍 width 和 padding 属性。
到目前为止，每个单元格的内容都是捆绑在一起的，边框就在内容的顶部。 您可能还注意到，表格的宽度与其内容一样宽。 <table> 有自己的显示属性：display: table。 要使表格占据父容器的整个宽度，可以将 width: 100% 添加到 table 选择器。
由于这是一个相对较小的表，因此不需要向 <table> 元素添加 width 属性。 相反，在您的文本编辑器中打开 styles.css 并添加一个由 thead th 组成的组合选择器，它将样式范围限定为 <thead> 元素内的 <th> 元素。 然后，添加一个值为 25% 的 width 属性，如以下代码块的突出显示部分所示：
样式.css
...
th, td {
border: 1px solid black;
}
thead th {
width: 25%;
}
由于此表中有四列，因此您可以通过应用 width: 25% 为每列赋予相等的宽度。 只需要设置每列的第一个单元格，因此需要设置 thead th 选择器。 一个单元格的宽度决定了该列中所有单元格的宽度。
保存对 styles.css 的更改后，返回浏览器并刷新 index.html。 该表现在将有四列宽度相同，如下图所示：
注意： 如果您希望每列具有不同的宽度，请对列中的每个 th 应用特定的类。 然后，使用这些类，设置您想要的宽度。
现在列的宽度相等，通过使用 padding 属性，每个单元格的内容可以在内部使用更多空间。 与 width 属性不同，在单元格内应用空间需要定位所有 th 和 td 单元格元素。
在文本编辑器中打开 styles.css 并将 padding 属性添加到 th, td 的组选择器，然后将其值设为 8px。 以下代码块中突出显示的行表示必要的更改：
样式.css
...
th, td {
border: 1px solid black;
padding: 8px;
}
thead th {
width: 25%;
}
将更改保存到 styles.css，然后在浏览器中刷新 index.html。 8px 填充添加到每个单元格的每一侧，提供空间以使表格数据更清晰。 下图描述了它在浏览器中的显示方式：
注意： 表格单元格的框模型与通常模型不同，不识别 margin 属性。
在本节中，您将每列的 width 属性设置为相等，并使用 padding 属性为每个单元格添加间距，以使数据更易于阅读。 在下一节中，您将使用一个类来定位和设置特定表格单元格的样式。
定位特定表格单元格
在此步骤中，目标是在视觉上突出显示表格中的一个单元格。 您将在 HTML 中应用类名，然后使用类选择器和 background-color 属性来创建高亮效果。
首先，在文本编辑器中打开 index.html 并向 <td> 元素添加一个 class 属性，其中包含文本 90%。 为 class 属性赋予 cell-highlight 的值，如以下代码块的突出显示的 HTML 所示：
索引.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 的类选择器附加到文件的末尾。 在选择器块内，添加一个值为 gold 的 background-color 属性。 接下来，添加一个 font-weight 属性，其值设置为 bold。 以下代码块中突出显示的 CSS 演示了它是如何格式化的：
样式.css
...
thead th {
width: 25%;
}
.cell-highlight {
background-color: gold;
font-weight: bold;
}
将更改保存到 styles.css，然后返回 Web 浏览器并刷新 index.html。 如下图所示，内容为 90% 的表格单元格现在具有深黄色背景和粗体字重：
您现在已经使用 background-color 和 font-weight 属性在特定表格单元格上使用类选择器来应用突出显示样式。 接下来，您将更改边框位置、字体和文本对齐方式，以将样式移向表格的最终外观。
设置表格的字体系列
要开始向表格的最终样式移动，您将移动边框以围绕整个表格，而不是单个单元格。 然后，您将为页面设置新的默认 font-family 并调整各个单元格的默认文本对齐方式。
要更新边框，请在文本编辑器中打开 styles.css。 然后，通过删除 border: 1px solid black; 属性和值来编辑现有的组选择器 th, tr。 这将从表格中删除单元格边框； 对于表格样式的第二阶段，填充将保持不变。 然后，在 table 类型选择器上，添加一个值为 1px solid black 的 border 属性。 以下代码块演示了这将如何出现在您的代码中：
样式.css
table {
border-collapse: collapse;
border: 1px solid black;
}
th, td {
padding: 8px;
}
...
保存对 styles.css 的更改并返回浏览器刷新 index.html。 边框现在将围绕整个表格而不是单个表格单元格，如下图所示：
要更改整个文档的字体，请在文本编辑器中返回 styles.css。 在 table 选择器块之前，添加一个 body 类型选择器。 在 body 选择器块中，添加值为 sans-serif 的 font-family 属性。 这会将页面的字体设置为浏览器的默认无衬线字体，例如 Helvetica 或 Arial。 以下代码块中突出显示的 CSS 表示对 styles.css 的更改：
样式.css
body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 1px solid black;
}
...
将这些更改保存到 styles.css，然后在浏览器中重新加载 index.html。 整个表格的字体现在将具有浏览器的默认无衬线字体，如下图所示：
最后，要调整表格内容的对齐方式，请在文本编辑器中返回 styles.css。 浏览器通常默认内容对齐到左上角位置。 与电子表格应用程序中的对齐内容类似，表格可以将内容对齐到表格单元格的中间，而不管行高如何。
要设置水平居中对齐，请转到 table 类型选择器并添加值为 center 的 text-align 属性。 然后，要设置垂直居中对齐，请添加值为 middle 的 vertical-align 属性。 以下代码块的突出显示部分演示了如何将其添加到 styles.css：
样式.css
body {
font-family: sans-serif;
}
table {
border-collapse: collapse;
border: 1px solid black;
text-align: center;
vertical-align: middle;
}
...
将更改保存到 styles.css，然后返回 Web 浏览器重新加载 index.html。 单元格内容现在将在单元格内水平和垂直居中。 请注意，<th> 单元格没有改变它们的间距。 这是因为表格标题默认使用居中文本。
垂直居中不会立即与内容一样明显，但如果一个单元格的内容换行到第二行，则该行中剩余的单元格将垂直对齐其内容。
下图显示了它在浏览器中的显示方式：
在本节中，您将边框属性从表格单元格移动到整个表格。 您还为页面设置了新的字体系列并更改了表格单元格内容的默认对齐方式。 在下一节中，您将为表格的 <caption> 元素添加样式并了解有关其用途的更多信息。
样式化表格标题
无论 <caption> 在 <table> 元素中的什么位置，<caption> 元素都为表格的有视力和无视力的读者提供上下文并显示在表格上方。 对于屏幕阅读器和盲文用户，<caption> 提供了表格用途的清晰上下文，尤其是当页面上有多个表格时。
由于 <caption> 是仅出现在 <table> 元素内部的元素，因此可以使用 caption 类型选择器对其进行样式设置。 caption 的默认值是居中文本，具有继承的大小、系列和常规粗细。
要开始更改 <caption> 元素的样式，请在文本编辑器中打开 styles.css。 在 table 选择器之后添加一个 caption 选择器，以使您的 CSS 保持逻辑流顺序。 然后，使用 font-weight、font-size、text-align 和 color 属性，创建一个大、粗体、左对齐和深灰色的标题. 以下代码块中突出显示的 CSS 演示了如何格式化：
样式.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。 如下图所示，标题内容现在更大更粗，为表格创建了一个标题：
接下来，在 caption 和 table 的可视部分之间需要一些空间。 返回到文本编辑器中的 styles.css 以向 caption 添加额外的间距。
caption 可以接受 margin 和 padding 间距属性。 由于仅在 caption 下方需要间距，因此向选择器块添加 margin-bottom 属性，其值为 16px。 以下代码块中突出显示的行指示了如何应用它：
样式.css
caption {
font-weight: bold;
font-size: 24px;
text-align: left;
color: #333;
margin-bottom: 16px;
}
将更改保存到 styles.css 并在 Web 浏览器中刷新 index.html。 caption 现在在文本和表格之间有更多空间，如下图所示：
在本节中，您为表格的 <caption> 元素创建了自定义样式。 您还了解到 <caption> 是为使用辅助技术阅读表格的人提供信息上下文的重要元素。 在下一部分中，您将把样式应用到顶部的标题表行。
样式化顶行标题单元格
接下来，您将对顶行标题应用样式。 <thead> 元素将包含顶行，因此所有样式都可以直接应用于该元素。 目的是创建一个深灰色背景，带有白色的全大写文本。
首先，在文本编辑器中打开 styles.css。 创建一个新的 thead 类型选择器。 在选择器块中，添加一个值为 #333 的 background-color 属性，这将创建深灰色。 然后，添加一个值为 white 的 color 属性：
样式.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。 顶部标题行现在在视觉上与众不同，具有纯黑色背景和粗体白色文本。 下图显示了它在浏览器中的显示方式：
接下来，要为顶部标题添加更多美感，请在文本编辑器中返回 styles.css。 通过添加值为 0.875rem 的 font-size 属性来更改文本的大小，这将使字体大小减小一点。 然后，要使所有字母大写，添加一个 text-transform 属性，其值为 uppercase。 最后，要在字母之间留出一些空间，请使用 letter-spacing 属性并将值设置为 2%。 这将在大写字符之间创建足够的空间，因此它们不会聚集在一起，使它们更易于阅读。
以下代码块中突出显示的 CSS 演示了如何格式化这些样式：
样式.css
thead {
background-color: #333;
color: white;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 2%;
}
将更改保存到 styles.css，然后返回浏览器刷新 index.html。 如下图所示，文本现在是大写的，大小比单元格内容小一点，但作为标题的层次结构清晰：
在此步骤中，您使用了几个属性来为顶部标题行提供可识别的样式。 没有视力和自信的技术用户已经可以访问该表这部分的 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 展示了它在文本编辑器中的显示方式：
样式.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 并刷新页面。 第二行现在将具有浅灰色背景，虽然看起来没有什么不同，但奇数行现在具有定义的白色背景，而不是其默认的透明背景。 当您添加行时，这些样式将从白色变为浅灰色。 下图演示了它在浏览器中的显示方式：
在本节中，您使用了 :nth-child() 伪类在表格的主体部分创建交替的行颜色。 在本教程的最后一节中，您将结合在前两节中学到的知识，为表格左侧的行标题创建自定义样式。
样式化左侧标题单元格
该表格的最后一个样式是为表格左侧的 y 轴标题添加蓝色背景。 这将分两部分进行：第一部分类似于通过定位每行中的 th 单元格来设置顶部标题行的样式。 然后，您将使用与上一节相同的 :nth-child() 伪类方法创建颜色偏移。
要应用主要的蓝色背景，请在文本编辑器中打开 styles.css 文件。 您需要定位 <tbody> 中的 <th> 元素，以便 <thead> 中的 <th> 元素不会获得这些样式。 创建一个 tbody th 的组合选择器，然后给它一个 background-color 属性和 #36c 的值。 应用值为 #fff 或 white 的 color 属性。 最后，要将文本设置为左对齐，请将 text-align 属性设置为 left 的值：
样式.css
...
tbody tr:nth-child(even) {
background-color: #eee;
}
tbody th {
background-color: #36c;
color: #fff;
text-align: left;
}
将更改保存到 styles.css，然后在浏览器中刷新 index.html。 如下图所示，行标题现在是独特的蓝色和白色文本：
最后，要将交替的行颜色转移到行标题中，请在文本编辑器中返回 styles.css。 要实现与数据行相同的效果，您将需要一个 :nth-child() 伪类选择器。 由于 tbody th 组合器选择器上已经设置了蓝色背景，因此您只需将 :nth-child(even) 调整为更深的蓝色。 但是，由于 :nth-child() 伪类选择器的工作方式，您仍然需要将其应用于 <tr> 元素而不是 <th> 元素，因为行 ([ X166X]) 计数是如何达到效果的。 这将需要一个更复杂的 tbody tr:nth-child(even) th 组合选择器，并将 background-color 属性设置为 #25c。
以下代码块突出显示了此 CSS 的格式：
样式.css
...
tbody th {
background-color: #36c;
color: #fff;
text-align: left;
}
tbody tr:nth-child(even) th {
background-color: #25c;
}
保存对 styles.css 的更改，然后最后一次返回浏览器并刷新 index.html。 样式现在已完成，行标题和数据之间的行颜色交替变化，如下图所示：
在本节中，您将样式范围限定为行标题，并继承了前面部分中学到的内容，以准确定位交替的背景颜色。
结论
您现在已经成功地构建了一个表格并学习了几个实用的 CSS 属性和选择器类型以应用于表格数据。 展望未来，您可以制作更复杂的表格，进一步推动这些概念。 您还可以使用 nth-child 选择器在项目符号列表或导航链接上创建交替样式。 HTML 表格对于呈现各种表格数据非常有用，并且 HTML 和 CSS 的功能允许大量表格类型。
如果您想阅读更多 CSS 教程，请尝试 如何使用 CSS 设置 HTML 样式系列 中的其他教程。
