HTML中的表格以及对表格样式的处理

这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

Hello 大家好，我是一碗周，不是你想的那个“一碗粥”，是一个不想被喝掉的前端👨🏻‍💻，如果我写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第二十六篇-《HTML中的表格以及对表格样式的处理》

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

本篇文章将来学习HTML中的表格以及使用CSS对表格样式的处理，本篇文章包含的内容如下图所示：

什么是表格

在现实生活中，表格是一种比较常见的形式，例如报名表、简历等。在HTML页面中也提供了表格相关的一组元素来在HTML页面中实现表格的效果。

什么是表格

表格 是一组由行和列组成的结构化数据集，可以将不同类型的数据集成在一张表中以显示不同类型数据之间存在的某种关系，如下图所示：

如上述所示，在表格中存在着一些概念，如下所示：

• 行：水平方向上的一组数据，一般为某个主题的各种数据内容，例如上图中是某个人的各项信息。

• 列：垂直方向上的一组数据，一般为某一项数据，例如上图中的“姓名”一栏。

• 单元格：表格中的显示某一项数据的方块。

什么是表格元素

为了可以在HTML页面中实现表格的效果，HTML提供了一系列表格元素。根据表格中的一些概念，HTML页面中提供的表格元素如下：

• <table>元素：表示一个表格，作为表格的容器。

• <tr>元素：表示一个表格中的行。

• <td>元素：表示一个表格中的单元格。

如下示例代码展示了HTML页面中的一个基本表格：

<table>
    <tr><th>姓名</th><th>区域</th></tr>
    <tr><td>梵云飞</td><td>西西域</td></tr>
    <tr><td>欢都落兰</td><td>南国</td></tr>
</table>

上述代码的CSS样式如下：

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

代码运行结果如下图所示：

tips：上述代码会在后面依次讲解

表格的基本结构

HTML 页面提供了一组有关表格的元素，其中最为基本的结构如下示例代码所示：

<table>  
    <tr>  
        <td>单元格</td>  
    </tr>  
 </table>

表格元素的最为基本的结构为：

1. <table>元素：表示 HTML页面中的一个表格，作为表格的容器。

2. <tr>元素：表示HTML页面中一个表格的行。一个表格可以拥有一行或多行。

3. <td>元素：表示HTML页面中的一个表格中一行的单元格。一行可以拥有一个单元格或多个单元格。

表格的基本结构在一般表格应用案例中的分析如下图所示：

标题单元格

HTML中的<th>元素用来定义为一组单元格的标题。该元素的用法与<td>元素保持一致，定义在<tr>元素中。

如下示例代码展示了<th>元素的用法：

<table>
    <tr>
        <th>姓名</th>
        <th>区域</th>
    </tr>
    <tr>
        <td>梵云飞</td>
        <td>西西域</td>
    </tr>
    <tr>
        <td>欢都落兰</td>
        <td>南国</td>
    </tr>
</table>

代码运行结果如下图所示：

如上图所示，我们可以发现<th>元素中的文本内容在浏览器运行时会自动加粗并且居中显示的效果。

<th>元素的scope属性用来定义与该标题单元格相关联的单元格，是一个枚举类型，具体的值如下所示：

• row：表示当前标题单元格关联一行中的所有单元格。

• col：表示当前标题单元格关联一列中的所有单元格。

• rowgroup：表示当前标题单元格属于某一个行组并与其中所有单元格相关联。

• colgroup：表示当前标题单元格属于某一个列组并与其中所有单元格相关联。

• auto：由浏览器自动分配。

如下示例代码展示了<th>元素的scope属性的用法：

<table>
    <tr>
        <th>姓名</th>
        <th>区域</th>
    </tr>
    <tr>
        <th scope="row">梵云飞</th>
        <td>西西域</td>
    </tr>
    <tr>
        <th scope="row">欢都落兰</th>
        <td>南国</td>
    </tr>
</table>

代码运行结果如下图所示：

值得注意的是，即使一个单元格中没有任何内容，<td>元素或<th>元素仍然需要定义，来表示一个空单元格的存在。

表格的标题

HTML中的<caption>元素用来定义 HTML 页面中表格的标题。该元素一般作为<table>元素的第一个子级元素出现，同时会显示在表格内容中的最前面，并且会在水平方向居中显示。

如下示例代码展示了<caption>元素的用法：

<table>
    <caption>
        狐妖小红娘
    </caption>
    <tr>
        <th>姓名</th>
        <th>区域</th>
    </tr>
    <tr>
        <td>梵云飞</td>
        <td>西西域</td>
    </tr>
    <tr>
        <td>欢都落兰</td>
        <td>南国</td>
    </tr>
</table>

代码运行结果如下图所示：

跨行与跨列

HTML页面中的表格除了常规的之外，还可以实现跨行或跨列的效果。具体实现方式是通过如下属性来实现的：

• colspan属性：用来规定表格单元格可横跨的列数。

• rowspan属性：用来规定表格单元格可横跨的行数。

如下示例代码展示了跨行的效果：

<table>
    <tr>
        <!-- 占两个单元格 -->
        <th colspan="2">狐妖小红娘</th>
    </tr>
    <tr>
        <!-- 垂直占4个单元格 -->
        <th rowspan="4">四大妖皇</th>
        <td>涂山红红</td>
    </tr>
    <tr>
        <td>梵云飞</td>
    </tr>
    <tr>
        <td>石宽</td>
    </tr>
    <tr>
        <td>欢都擎天</td>
    </tr>
</table>

代码运行结果如下图所示：

表格的完整结构

在HTML中一个表格的完整结构还包括以下三个元素

• <thead>元素：用来定义HTML页面中表格的标题单元格的行。

• <tbody>元素：用来定义HTML页面中表格的主体（表格中真正的数据内容）。

• <tfoot>元素：用来定义HTML页面中表格一组各列的汇总行。

如下示例代码展示了<thead>元素、<tbody>元素和<tfoot>元素的用法：

<table>
    <thead>
        <tr>
            <th colspan="2">狐妖小红娘</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th rowspan="4">四大妖皇</th>
            <td>涂山红红</td>
        </tr>
        <tr>
            <td>梵云飞</td>
        </tr>
        <tr>
            <td>石宽</td>
        </tr>
        <tr>
            <td>欢都擎天</td>
        </tr>
    </tbody>
</table>

如上图所示，<thead>元素、<tbody>元素和 <tfoot>元素不会使表格更易于屏幕阅读器用户访问，也不会造成任何视觉上的改变。然而，它们在应用样式和布局上会起到作用，可以更好地让CSS应用到表格上。

表格的样式操作

表格布局

CSS中的table-layout属性用来实现表格中单元格的布局，行和列的计算。该属性具有如下2个值：

• auto：默认值，浏览器会使用自动表布局算法，已达到表格及其单元格的宽度被调整以适应内容。

• fixed：表格或表格中列的宽度是由表格中第一行单元格的宽度决定的，后续行的单元格则不会影响表格中列的宽度。

以上两个值产生的结果可能不同，但两者之间最大的差异主要是速度上的。相对fixed的速度更快，而auto的速度稍慢，原因如下：

• fixed：之所以速度快，主要原因是一旦浏览器解析了表格中第一行单元格的宽度就可以呈现整个表格，而不依赖表格中单元格的内容。

• auto：表格的width属性的值为auto就会触发这种方式，无论table-layout属性的值是什么。这种方式之所以速度慢，主要原因在于每渲染一个新的单元格都要完成整个表格的布局。

表格标题

CSS中的caption-side属性用来设置 HTML 页面中表格的<caption>元素显示的位置，该属性需要与<caption>属性配合使用。该属性的值具有如下 2 个：

• top：默认值，表示表格标题显示在表格的上方。

• bottom：表示表格标题显示在表格的下方。

如下示例代码展示了caption-side属性值为bottom时的情况：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>caption-side</title>
        <style>
            td,
            th,
            table {
                border: 1px solid #284;
            }
            caption {
                caption-side: bottom;
            }
        </style>
    </head>
    <body>
        <table>
            <caption>
                狐妖小红娘
            </caption>
            <tr>
                <th>姓名</th>
                <th>区域</th>
            </tr>
            <tr>
                <td>梵云飞</td>
                <td>西西域</td>
            </tr>
            <tr>
                <td>欢都落兰</td>
                <td>南国</td>
            </tr>
        </table>
    </body>
</html>

代码运行结果如下图所示：

处理空单元格

CSS中的empty-cells属性用来设置HTML页面的表格中没有可见内容的单元格的边框和背景是显示还是隐藏。该属性的值具有如下两个：

• show：默认值，边框和背景正常渲染，与普通元素一样。

• hide：边框和背景被隐藏。

如下示例代码展示了empty-cells属性的用法：

table {
    empty-cells: show;
}

两者区别如下图所示：

单元格边框

CSS中的border-collapse属性用来设置HTML页面中表格的边框是分离的还是合并的，该属性具有如下两个值：

• separate：默认值，每个单元格拥有独立的边框。

• collapse：相邻的单元格共用同一条边框。

当border-callapse属性值为separate时称为分隔（_separated）_模式 ，是HTML表格的传统模式。这种模式下，相邻单元格都拥有不同的边框。边框之间的距离是通过CSS的border-spacing属性来进行设置。

CSS中的border-spacing属性用来设置HTML页面中表格的相邻单元格边框之间的距离。该属性的值设置具有如下两种方式：

• 单值：同时设置单元格之间在水平方向和垂直方向的距离。

• 双值：第一个值用来设置相邻两列的单元格之间的水平方向的距离，第二个值用来设置相邻两行的单元格之间的垂直方向的距离。

如下示例代码展示了border-callapse属性值为collapse时，border-spacing属性的用法：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>边框处理</title>
        <style>
            td,
            th,
            table {
                border: 1px solid #284;
            }
            table {
                border-collapse: collapse;
                border-spacing: 0;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>姓名</th>
                <th>区域</th>
            </tr>
            <tr>
                <td>梵云飞</td>
                <td>西西域</td>
            </tr>
            <tr>
                <td>欢都落兰</td>
                <td>南国</td>
            </tr>
        </table>
    </body>
</html>

代码运行结果如下图所示：

总结

预告：下一篇文章我们将来学习CSS中的结构伪类选择器