HTML 表格 - 绿叶网

在 HTML 中，表格用于在网页中表示表格型数据。表格在网页中应用非常广泛，比如咱们绿叶网很多地方就用到了表格，如下图所示。

绿叶网中使用的HTML表格

需要注意的是，在 20 年前，网页都是使用表格来排版布局的（整个网页就是一个大表格）。但在现代 Web 开发中，严禁使用表格来进行页面布局，它只能用来显示数据。对于布局来说，强烈推荐使用以下 2 种方式：

CSS Flex
CSS Grid

HTML 表格的 “基本结构”

在 HTML 中，一个表格一般会由以下 3 个部分组成。

表格：使用 table 标签表示。
行：使用 tr 标签表示。
单元格：使用 td 标签表示。

语法：

<table>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

说明：

tr 指的是 “table row（表格行）”，td 指的是 “table data cell（表格单元格）” 。

<table> 和 </table> 表示整个表格的开始和结束，<tr> 和 </tr> 表示一行的开始和结束，而 <td> 和 </td> 表示一个单元格的开始和结束。

在表格中，有多少组 “<tr></tr>”，就表示有多少行。

示例 1：HTML 表格的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 这里使用CSS为表格加上边框 */
        table, tr, td { border:1px solid silver; }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>HTML</td>
            <td>CSS</td>
        </tr>
        <tr>
            <td>JavaScript</td>
            <td>Vue</td>
        </tr>
    </table>
</body>
</html>

页面效果如下图所示。

HTML表格的基本结构

分析：

默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框，是想让大家更清楚地看到一个表格结构。对于表格的边框、颜色、大小等，我们在 CSS 教程中会学到，现在不理解那一句 CSS 代码也没有关系。

在 HTML 学习中，我们只需要知道表格用什么标签就行了。记住，学习 HTML 只管结构就行了，等学习了 CSS 再去考虑样式。

HTML 表格的 “完整结构”

在 HTML 中，一个表格的 “完整结构” 不仅仅只有 table、tr、td 这 3 个标签，还包括 caption、th 等标签。

1. 表格标题：caption

在 HTML 中，表格一般都会有一个标题，我们可以使用 caption 标签来实现。

语法：

<table>
    <caption>表格标题</caption>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格3</td>
        <td>单元格4</td>
    </tr>
</table>

说明：

一个表格只能有一个标题，也就是只能有一个 caption 标签。在默认情况下，标题都是位于整个表格内的第一行。

示例 2：HTML 表格的标题

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 这里使用CSS为表格加上边框 */
        table, tr, td { border:1px solid silver; }
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

页面效果如下图所示。

HTML表格标题

分析：

默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框是想让大家更清楚地看到一个表格结构。

2. 表头单元格：th

在 HTML 中，单元格可以分为以下 2 种：

表头单元格：使用 th 标签来表示。其中，th 指的是 “table header cell（表头单元格）”。
表行单元格：使用 td 标签来表示。其中，td 指的是 “table data cell（表行单元格）”。

语法：

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
</table>

说明：

th 和 td 在本质上都是单元格，但并不代表两者可以互换，它们之间的区别如下。

在显示上：浏览器会以 “粗体” 和 “居中” 来显示 th 标签中的内容，但是 td 标签不会。
在语义上：th 标签用于表头，而 td 标签用于表行。

当然，对于表头单元格，我们可能会使用 td 来代替 th，但不建议这样做。因为 HTML 语义化是非常重要的。学习 HTML 的目的就是：在需要的地方用到正确的标签（也就是语义化）。

示例 3：HTML 表头单元格

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表头单元格</title>
    <style>
        /* 这里使用CSS为表格加上边框 */
        table, tr, td, th { border:1px solid silver; }
    </style>
</head>
<body>
    <table>        
        <caption>考试成绩表</caption>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>英语</th>
            <th>数学</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>小红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>小杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

页面效果如下图所示。

HTML表头单元格

分析：

默认情况下，表格是没有边框的。在这个例子中，我们使用 CSS 加入边框是想让大家更清楚地看到一个表格结构。

HTML 表格 “语义化”

一个完整的 HTML 表格包含：table、caption、tr、th、td。为了更进一步对表格进行语义化，HTML 还引入了 thead、tbody 和 tfoot 标签。

thead、tbody 和 tfoot 把表格划分为 3 部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。

语法：

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>表行单元格1</td>
            <td>表行单元格2</td>
        </tr>
        <tr>
            <td>表行单元格3</td>
            <td>表行单元格4</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格5</td>
            <td>标准单元格6</td>
        </tr>
    </tfoot>
</table>

示例 4：HTML 表格的语义化

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表格语义化</title>
    <style>
        /* 这里使用CSS为表格加上边框 */
        table, tr, td, th { border:1px solid silver; }
    </style>
</head>
<body>
    <table>
        <caption>考试成绩表</caption>
        <thead>    
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>英语</th>
                <th>数学</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>平均</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

页面效果如下图所示。

HTML表格语义化

分析：

表脚（tfoot）往往用于统计数据的。对于 thead、tbody 和 tfoot 标签，不一定全部都上，例如 tfoot 就很少会用到。一般情况下，我们都是根据实际需要来使用这些标签。

thead、tbody 和 tfoot 标签也是表格中非常重要的标签，它从语义上区分了表头、表身和表脚，很多人容易忽略它们。

此外，thead、tbody 和 tfoot 除了使得代码更具有语义之外，还有另外一个重要作用：方便分块来控制表格的 CSS 样式。

常见问题

1. 对于表格的显示效果来说，thead、tbody 和 tfoot 标签加了跟没加是一样的啊，为什么还要用呢？

单纯从显示效果来说，确实如此。曾经作为初学者时，我也有过这样的疑问。但是加了之后，会让你的代码更具有逻辑性，并且还可以很好地结合 CSS 来分块控制样式。