如何使用 CSS 给表格添加样式

从以下代码块中添加突出的 HTML 到您的 index.html 文件:

 1[label index.html]
 2...
 3<table>
 4  <caption>2019 Fourth Quarter Report</caption>
 5  <thead>
 6    <tr>
 7      <th><!-- Intentionally Blank --></th>
 8      <th>October</th>
 9      <th>November</th>
10      <th>December</th>
11    <tr>
12  </thead>
13  <tbody>
14    <tr>
15      <th>Projected</th>
16      <td>$820,180</td>
17      <td>$841,640</td>
18      <td>$732,270</td>
19    </tr>
20    <tr>
21      <th>Actual</th>
22      <td>$850,730</td>
23      <td>$892,580</td>
24      <td>$801,240</td>
25    </tr>
26    <tr>
27      <th>Utilization</th>
28      <td>83%</td>
29      <td>90%</td>
30      <td>75%</td>
31    </tr>
32  </tbody>
33</table>
34...

<$>[注] 注: 与表格软件一样,有时可能需要将单元格合并,例如当单个单元格占用两个列时。

现在你已经写出你的表格,保存文件,然后,在你的网页浏览器中打开 `index.html. 下面的图像描绘了浏览器默认风格的这个表格将如何看起来,当加载到 Firefox 网页浏览器:

在本节中,您为表数据设置了HTML。您了解了表如何由一系列元素组成,以不同的顺序组合,以创建一个可访问的数据集。

使用边界和边界崩溃创建初始表格风格

设计表的第一步是了解一些浏览器的默认风格和行为,本节将涵盖边界属性和边界崩溃属性,并展示如何在单元格之间创建边界线。

要开始样式化您的表格,请在文本编辑器中创建并打开名为styles.css的文件,在与index.html相同的文件夹中。 添加一个由th元素选择器和td元素选择器组成的选择器组。 然后,在选择器块中,添加一个具有1px固体黑色值的边界属性,如下列代码块所示:

1[label styles.css]
2th, td {
3  border: 1px solid black;
4}

将您的更改保存到styles.css,然后在您的 Web 浏览器中打开index.html。而不是一个凝聚式网格,将有几个框具有自己的边界。下面的图像描述了表如何在 Web 浏览器中出现:

要更改此默认设置,请返回到文本编辑器中的styles.css,并将表元素选择器添加到文件的顶部。然后,在选择器块中,应用边界崩溃属性。 此属性默认为分开,但在这里你会将其更改为崩溃值。 这会消除表单元格之间的间隔,并导致边界重叠。 以下代码块中的突出CSS显示了你要添加到你的styles.css文件的内容:

1[label styles.css]
2table {
3  border-collapse: collapse;
4}
5
6th, td {
7  border: 1px solid black;
8}

打开您的网页浏览器,更新index.html。 该表现在将有一个网格,由多个交叉的黑线定义。 以下图像描述了边界将如何出现在您的浏览器:

在本节中,您使用边界属性将边界应用于每个表单元格中,使用th和td元素选择器。您还了解到,默认情况下,表单单元格由一个空间分开。

设置桌子的尺寸

接下来,您将为表单元格添加一些间隔,以使数据更易于读取. 为了解决将白色空间添加到表单元格并使表格更加平衡,本节将专注于宽度和粘贴属性。

从现在开始,每个单元格的内容都被堆积起来,边界就在内容的顶部。您可能也注意到表只有其内容的宽度。 <table> 有自己的显示属性: display: table. 要使表走到母容器的整个宽度,可以添加一个 width: 100% 到 table 选择器。

由于这是一个相对较小的表,所以不需要将宽度属性添加到<table>元素中。相反,请在文本编辑器中打开styles.css并添加一个组合选择器,其中包括thead th,该组合将风格扩展到<th>元素中的<thead>元素中。

1[label styles.css]
2...
3th, td {
4  border: 1px solid black;
5}
6
7thead th {
8  width: 25%;
9}

由于本表中有四个列,您可以通过应用宽度: 25 %来给每个列提供相同的宽度。 只需要设置每个列的第一个单元格,因此需要选择thead th。

将更改保存到 styles.css 后,返回浏览器并更新 index.html. 表现在将有相同宽度的四个列,如下图像所示:

<$>[注] 注: 如果您希望每个列都有不同的宽度,请将特定类应用于列中的每个th。

现在,由于列的宽度相等,每个单元格的内容可以通过使用粘贴属性来使用更多空间。

在文本编辑器中打开styles.css,并将一个padding属性添加到th, td的组选择器中,然后给它一个值为8px。

 1[label styles.css]
 2...
 3th, td {
 4    border: 1px solid black;
 5    padding: 8px;
 6}
 7
 8thead th {
 9  width: 25%;
10}

将您的更改保存到styles.css,然后在浏览器中刷新index.html。在每个单元格的每个侧面添加了8px插件,为表数据提供更易读的空间。

<$>[注] 注: 表单元格的框模型与常规模型不相同,并且不识别边缘属性。

在本节中,您将每个列的宽度属性设置为等,并使用粘贴属性将间隔添加到每个单元格,以便更容易阅读数据。

瞄准特定表单元格

在此步骤中,目标是视觉地突出表中的单元格之一,您将在HTML中应用一个类名称,然后使用类选择器和背景颜色属性来创建突出效果。

首先,在文本编辑器中打开index.html,并将一个类属性添加到<td>元素中,里面包含文本 90%。

 1[label index.html]
 2<table>
 3  ...
 4  <tr>
 5    <th>Utilization</th>
 6    <td>83%</td>
 7    <td class="cell-highlight">90%</td>
 8    <td>75%</td>
 9  </tr>
10  ...
11</table>

将您的更改保存到index.html,然后在文本编辑器中打开styles.css。 将.cell-hightlight 的类选择器添加到文件的末尾。 选择器块内,添加一个具有黄金值的背景色属性。 然后,添加一个字体重量属性,该值设置为bold。 以下代码块中的突出 CSS 显示了该属性的格式化:

 1[label styles.css]
 2...
 3thead th {
 4  width: 25%;
 5}
 6
 7.cell-highlight {
 8  background-color: gold;
 9  font-weight: bold;
10}

将更改保存到styles.css,然后返回 Web 浏览器并更新index.html。如下图像所示,包含 **90%**的表单单元格现在具有深黄色背景和大胆的字体重量:

现在,您已在特定表单元格上使用类选择器,使用背景颜色和字体重量属性应用突出样式。

为桌子设置字体家族

要开始移动到表的最终风格,将边界移动到整个表周围,而不是单个单元格,然后为页面设置一个新的默认字体家族,并调整单个单元格的默认文本对齐。

要更新界限,请在文本编辑器中打开styles.css。然后,通过删除border: 1px solid black;属性和值来编辑现有的组选择器th, tr。这将从表中删除单元格界限,表格风格的第二阶段将保持相同。然后,在table类型选择器上,添加一个具有1px solid black值的border属性。下面的代码块展示了如何在你的代码中出现:

 1[label styles.css]
 2table {
 3  border-collapse: collapse;
 4  border: 1px solid black;
 5}
 6
 7th, td {
 8  padding: 8px;
 9}
10...

将更改保存到styles.css,然后返回浏览器以更新index.html。边界现在将围绕整个表而不是单个表单元格,如下图所示:

要更改整个文档的字体,请在文本编辑器中返回styles.css。在table选择器块之前,添加一个body类型选择器。在body选择器块中,添加font-family属性,值为sans-serif。这将将页面的字体设置为浏览器的默认 sans-serif字体,如Helvetica或Arial。下面的代码块中突出的CSS显示了styles.css的更改:

 1[label styles.css]
 2body {
 3  font-family: sans-serif;
 4}
 5
 6table {
 7  border-collapse: collapse;
 8  border: 1px solid black;
 9}
10...

将这些更改保存到styles.css,然后在浏览器中重新加载index.html。整个表格的字体现在将具有浏览器的默认 sans-serif字体,如下图像所示:

最后,要调整表内容的对齐,请在文本编辑器中返回styles.css。浏览器通常会将内容对齐设置为左上方位置。

要设置水平中间对齐,请进入表类型选择器并添加文本对齐属性以中心的值。 然后,要设置垂直中间对齐,请添加垂直对齐属性以中间的值。 以下代码块的突出部分说明如何将此属性添加到styles.css:

 1[label styles.css]
 2body {
 3  font-family: sans-serif;
 4}
 5
 6table {
 7    border-collapse: collapse;
 8    border: 1px solid black;
 9    text-align: center;
10    vertical-align: middle;
11}
12...

将更改保存到 styles.css,然后返回 Web 浏览器以重新加载 index.html. 单元格内容现在将在单元格内横向和垂直中心。

垂直中心化不会立即显而易见,但如果一个单元格的内容被包裹到第二行,则行中的剩余单元格将垂直地对齐其内容。

下面的图像显示在浏览器中将如何显示:

在本节中,您将边界属性从表单元格移动到整个表中。您还为页面设置了一个新的字体组,并更改了表单单元格的内容的默认对齐。

标签: Table Caption

对于屏幕读者和布莱尔用户来说,一个<capitation>为表的目的提供明确的背景,特别是当页面上有多个表时。

由于