如何使用 CSS 设置 HTML 表格样式

浅浅的花香味﹌ 2023-09-28 08:38 5阅读 0赞

在 Web 开发的早期，HTML 表格非常基础，缺乏广泛的样式选项。然而，今天，大多数表格的样式都旨在为用户创造更美观和更实用的体验。

CSS 为样式表提供了许多属性。这些属性允许您（除其他外）分隔表格中的单元格、指定表格边框以及指定表格的宽度和高度。

本教程将通过示例讨论如何使用 CSS 设置表格样式。在本教程结束时，您将成为这方面的专家。

### **HTML 表格** ###

HTML 代码定义了表格的结构。您使用 <table> 标记来定义表格。<tr>、<th> 和 <td> 标记分别指定行、表头和内容单元格。

让我们看一个 HTML 表格的例子。*在下面的示例中，我们有一个表格，其中列出了 2020 年 3 月 23 日这一周纽约时报*畅销书排行榜上的前五本书：

![fdddb0b166364e7b8d55d0d66352df67.webp][]

我们表的代码如下：

<table>
      <tr>
        <th>Book Name</th>
        <th>Author</th>
        <th>Weeks on List</th>
      </tr>
      <tr>
        <td>The Mirror & the Light</td>
        <td>Hilary Mantel</td>
        <td>New this Week</td>
      </tr>
      <tr>
        <td>Journey of the Pharaohs</td>
        <td>Clive Cussler and Graham Brown</td>
        <td>New this Week</td>
      </tr>
      <tr>
        <td>Where the Crawdads Sing</td>
        <td>Delia Owens</td>
        <td>79</td>
      </tr>
      <tr>
        <td>American Dirt</td>
        <td>Jeanine Cummings</td>
        <td>8</td>
      </tr>
      <tr>
        <td>Little Fires Everywhere</td>
        <td>Celeste Ng</td>
        <td>57</td>
      </tr>
    </table>

该表包括三列六行，包括一个标题行。

### **CSS 表格** ###

CSS用于样式表。虽然上表以有组织的方式显示数据，但它是用纯 HTML 编写的（不存在样式）。通过使用 CSS，您可以使表格更美观。

您可以使用许多 CSS 函数来设置表格样式。使用 CSS，您可以：

*  添加边框
 *  折叠边框
 *  调整边框间距
 *  调整表格的宽度和高度
 *  添加填充
 *  水平对齐文本
 *  垂直对齐文本
 *  添加鼠标悬停（悬停）功能
 *  定义单元格颜色
 *  定义空单元格的显示方式

我们在下面的讨论中涵盖了所有这些主题。

#### **边框** ####

假设我们要在表格周围或其中的元素周围添加边框。

要添加边框，我们可以使用边框属性。这是一个使用边框属性为表格及其单元格（包括标题单元格）添加边框的示例：

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

在我们的代码中，我们定义了一个实心的、1 像素宽的黑色边框。这是我们的代码的结果：

![eb1fd0371cd147ad8386dbaa485a530c.webp][]

请注意，我们的表格包含双边框。这是因为我们为表格本身 (<table>)、它的标题 (<th>) 和它的单元格 (<td>) 应用了边框。要将双边框合并为单边框，我们可以使用border-collapse 属性。**找**

#### **边框折叠** ####

border-collapse 属性将表格中的双边框转换为单边框。border-collapse 属性的默认值是折叠的。如果为border-collapse 属性分配了值`collapse`，则表格周围的边框将被折叠。

下面是一个实际使用的border-collapse 属性示例：

table {
    	border-collapse: collapse;
    }

我们的代码返回：

![4847bb1922094462beff29e8406268b6.webp][]

我们的表格和它的内容现在有一个单一的边框。

#### **边框间距** ####

您可以使用border-spacing 属性来设置表格中单元格之间的间距。border-spacing 属性定义了单元格之间的水平和垂直间距——它按照这个顺序进行。

这是一个在我们的初始表格（没有折叠边框的表格）上使用边框间距属性的示例：

table {
    	border-spacing: 10px 10px;
    }

我们的代码返回：

![d576fcbb7c0243a1a638a8b3541e6730.webp][]

我们的每个单元格在水平和垂直边缘都有 10 像素的间距。

#### **宽度和高度** ####

您可以使用 width 和 height 属性指定表格的宽度和高度及其属性。

假设我们希望上表的宽度（带有折叠边框的那个）是网页本身的宽度。并且，假设我们希望每个表头的高度为 30 像素高。我们可以使用以下 CSS 代码来做到这一点：

table {
    	width: 100%;
    }
    
    th {
    	height: 30px;
    }

我们的代码返回：

![8cf9be147445492b8a6636ed08b52a09.webp][]

如您所见，我们的表格现在是网页的宽度。此外，我们表中的列标题为 30 像素高。

#### **填充** ####

您可以使用 padding 属性在表格中单元格的边框和这些单元格的内容之间添加一定量的空间。padding 属性可用于 <td> 和 <th> 标签。

假设我们想在表格单元格的内容周围添加 10 像素的填充 - 包括标题单元格。我们可以使用以下代码来做到这一点：

th, td {
    	padding: 10px;
    }

我们的代码返回：

![e9abe40a0b464408b7418d69ee2e8263.webp][]

现在，我们每个表格行和标题的内容在所有边缘都有 10 像素的填充。

#### **水平文本对齐** ####

您可以使用 text-align 属性水平对齐存储在表格中 <th> 或 <td> 标记中的文本。默认情况下，<th> 元素居中对齐，<td> 元素左对齐。

text-align 属性最常用的值是：

*  左、中、右（除 Microsoft Edge 和 Internet Explorer 之外的所有浏览器都支持）
 *  开始和结束（除 Microsoft Edge 和 Internet Explorer 之外的所有浏览器都支持）

[» 更多： CSS Font-Size：CSS 中文本大小的教程][_ CSS Font-Size_CSS]

假设我们要将表格中的 <td> 元素居中，并将 <th> 元素与每个单元格的左侧对齐。我们可以使用以下代码来做到这一点：

th {
    	text-align: left;
    }
    
    td {
    	text-align: center;
    }

我们的代码返回：

![8ce00401026240b5b7ae411916e18a6a.webp][]

在此示例中，我们居中对齐非标题单元格文本和左对齐标题单元格文本。

#### **垂直文本对齐** ####

CSS vertical-align 属性用于指定 <th> 或 <td> 标记中内容的垂直对齐方式。默认情况下，vertical-align 属性的值设置为`middle`，这意味着内容垂直对齐到单元格的中间。

假设我们想要将 <td> 单元格中的文本与单元格底部对齐。我们可以使用以下代码来做到这一点：

td {
    height: 40px;
    vertical-align: bottom;
    }

我们的代码返回：

![df1faf02c79b4eadb11c3198f13a38b2.webp][]

在此示例中，我们将每个 <td> 单元格的高度设置为 40 像素。然后我们将这些单元格的内容垂直对齐到单元格的底部。

#### **水平边框** ####

创建表格时，您可能决定只希望边框出现在每个单元格的底部。您可以将border-bottom 属性应用于<th> 和<td> 单元格以执行此操作。

这是我们可以用来为表格中的每个单元格创建水平下边框的代码：

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

我们的代码返回：

![e0d997d5247e4419b63ccdf21143d0f4.webp][]

在此示例中，我们为表格中的每个单元格创建了一个纯黑色、1 像素宽的底部边框。

#### **鼠标悬停（：悬停）** ####

如果您在代码中使用 :hover 选择器，当用户将鼠标悬停在表格行上时，浏览器将突出显示表格行。

:hover 选择器很有用，因为它可以让您的表格更具交互性。它还可以帮助用户在查看表格时更好地可视化各个行。

假设我们希望表中行 (<tr>) 的背景颜色在用户将鼠标悬停在它们上方时变为浅灰色。我们可以使用以下代码来做到这一点：

tr:hover {
    background-color: lightgray;
    }

我们的代码返回：

![59766f277f05456680991f84d3570b0a.webp][]

当我们将鼠标悬停在表格行上时，该行的颜色变为浅灰色。在这种情况下，我们将鼠标悬停在表格的第四行上，因此该行的颜色变为浅灰色。

#### **表格颜色** ####

您可以使用 color 属性来指定表格中元素的背景颜色和文本颜色。假设我们希望表格标题单元格具有灰色背景和白色文本。我们可以使用下面的代码来设置表格的样式：

th {
    	background-color: gray;
    	color: white;
    }

我们的代码返回：

[» 更多： CSS 粘滞页脚][_ CSS]

![b71aa1f4781c4eb4a19071fde7b4a53f.webp][]

在此示例中，我们表格的标题单元格 (<th>) 具有灰色背景。我们还将每个标题单元格中的文本设置为白色。我们使用 CSS color 属性定义了这两个特征。

#### **条纹设计** ####

在设计表格时，您可能希望使用斑马风格的方法。在这种风格中，行颜色在两种颜色之间交替。这会产生条纹状斑马状效果。为了完成这个任务，我们可以使用 nth-child() 选择器。

这是我们将用于创建条纹设计的代码，其中我们将每隔一行的背景颜色设置为浅灰色：

tr:nth-child(even) {
    	background-color: lightgray;
    }

我们的代码返回：

![72e662195abe48b29e1df5e9e57bd502.webp][]

我们将表格中每个偶数行的背景颜色设置为浅灰色。

如果我们想将表格中奇数行的背景颜色设置为浅灰色，我们可以在上面的代码中指定“奇数”而不是“偶数”。

#### **空单元格** ####

如果单元格不包含任何文本，我们使用 empty-cells 属性来指定单元格是否应该有任何边框或背景。

empty-cells 属性采用以下两个值之一：隐藏或显示。当用户指定这些值之一时，CSS 会执行以下操作来清空单元格：

*  **hide**：隐藏背景颜色和边框。
 *  **show**：显示背景颜色和边框。

空单元格 CSS 属性仅在边框折叠设置为分离时才有效。这意味着边界没有折叠。

假设我们在上面的表格中有一个空单元格，并且想要隐藏该空单元格的背景和边框。我们可以使用下面的代码来完成这个任务：

table {
    	empty-cells: hide;
    	border-collapse: separate;
    }

我们的代码返回：

![d8532f4223384e6f8a39bd723acb0e47.webp][]

在此示例中，我们删除*了 Crawdads Sing*`Weeks on List`书的值。因为该单元格不包含任何值，所以当我们为空单元格属性指定值 hide 时，表格将隐藏边框元素，否则该元素将应用于该单元格。

### **结论** ###

CSS 提供了许多用于样式表的属性。其中包括 padding 属性（在单元格内容及其边框之间添加空间）和 text-align 属性（对齐单元格内的文本）。

本教程通过示例讨论了如何使用 CSS 设置表格样式。现在您已经准备好开始像专业人士一样在 CSS 中设置表格样式了！

[fdddb0b166364e7b8d55d0d66352df67.webp]: https://img-blog.csdnimg.cn/fdddb0b166364e7b8d55d0d66352df67.webp
[eb1fd0371cd147ad8386dbaa485a530c.webp]: https://img-blog.csdnimg.cn/eb1fd0371cd147ad8386dbaa485a530c.webp
[4847bb1922094462beff29e8406268b6.webp]: https://img-blog.csdnimg.cn/4847bb1922094462beff29e8406268b6.webp
[d576fcbb7c0243a1a638a8b3541e6730.webp]: https://img-blog.csdnimg.cn/d576fcbb7c0243a1a638a8b3541e6730.webp
[8cf9be147445492b8a6636ed08b52a09.webp]: https://img-blog.csdnimg.cn/8cf9be147445492b8a6636ed08b52a09.webp
[e9abe40a0b464408b7418d69ee2e8263.webp]: https://img-blog.csdnimg.cn/e9abe40a0b464408b7418d69ee2e8263.webp
[_ CSS Font-Size_CSS]: https://careerkarma.com/blog/css-font-size/
[8ce00401026240b5b7ae411916e18a6a.webp]: https://img-blog.csdnimg.cn/8ce00401026240b5b7ae411916e18a6a.webp
[df1faf02c79b4eadb11c3198f13a38b2.webp]: https://img-blog.csdnimg.cn/df1faf02c79b4eadb11c3198f13a38b2.webp
[e0d997d5247e4419b63ccdf21143d0f4.webp]: https://img-blog.csdnimg.cn/e0d997d5247e4419b63ccdf21143d0f4.webp
[59766f277f05456680991f84d3570b0a.webp]: https://img-blog.csdnimg.cn/59766f277f05456680991f84d3570b0a.webp
[_ CSS]: https://careerkarma.com/blog/css-sticky-footer/
[b71aa1f4781c4eb4a19071fde7b4a53f.webp]: https://img-blog.csdnimg.cn/b71aa1f4781c4eb4a19071fde7b4a53f.webp
[72e662195abe48b29e1df5e9e57bd502.webp]: https://img-blog.csdnimg.cn/72e662195abe48b29e1df5e9e57bd502.webp
[d8532f4223384e6f8a39bd723acb0e47.webp]: https://img-blog.csdnimg.cn/d8532f4223384e6f8a39bd723acb0e47.webp