HTML caption 标签

HTML caption 语法

在 HTML 中，caption 标签用于定义表格的标题，它通常位于表格（table）的开头。

语法：

<caption>标题内容</caption>

说明：

我们可以使用 CSS 的 caption-side 属性来定义表格标题的位置，也就是在顶部显示，还是在底部显示。

HTML caption 摘要

属于	HTML 表格
使用频率	高
兼容性	查看
官方文档	查看
MDN	查看

HTML caption 示例

接下来，我们通过几个简单的例子来讲解一下 HTML caption 标签是如何使用的。

示例 1：caption 标签的基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table, tr, td, th { border: 1px solid silver; }
    </style>
</head>
<body>
    <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>
</body>
</html>

页面效果如下图所示。

HTML caption标签示例

分析：

默认情况下，caption 标题是在表格顶部显示。如果希望其在底部显示，可以使用 CSS 的 caption-side: bottom; 来实现。请看下面例子。

示例 2：CSS 定义 caption 标签的位置

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        table, tr, td, th { border: 1px solid silver; }
        table { caption-side: bottom; }
    </style>
</head>
<body>
    <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>
</body>
</html>

页面效果如下图所示。

HTML caption标签位置

分析：

table { caption-side: bottom; } 表示定义表格标题位置是在表格的底部。