导航分类

HTML <button> 标签 HTML <center> 标签

HTML <caption> 标签

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

定义和用法

<caption>标签用于为 HTML 表格(table)定义标题或说明文字。

<caption>标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。

<caption>标签默认情况下，表格标题将在表格上方居中对齐。CSS 属性 text-align 和 caption-side 可用于对齐和放置标题。

<caption>元素的基本语法：

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

使用实例

接下来用多种实例演示<caption>标签的用法，来深化您对<caption>的理解。

1. 带标题的表格

实例代码运行代码

复制

<table>
    <caption>常见水果信息</caption>
    <tr>
        <th>水果名称</th>
        <th>颜色</th>
        <th>产地</th>
        <th>价格（元/斤）</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>红色、绿色</td>
        <td>山东、陕西</td>
        <td>5 - 10</td>
    </tr>
</table>

2. 定位表的标题（使用 CSS）

实例代码运行代码

复制

<table>
    <caption style="text-align:right">常见水果信息</caption>
    <tr>
        <th>水果名称</th>
        <th>颜色</th>
        <th>产地</th>
        <th>价格（元/斤）</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>红色、绿色</td>
        <td>山东、陕西</td>
        <td>5 - 10</td>
    </tr>
</table>

全局属性

<caption>标签还支持 HTML 中的全局属性。

事件属性

<caption>标签还支持 HTML 中的事件属性，但是实际用途极少。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示<caption>元素：

caption {
    display: table-caption;
    text-align: center;
}

注意事项

位置要求：<caption>必须是<table>元素的第一个子元素
默认显示：通常显示在表格上方居中
每个表格只能有一个：一个表格只能包含一个<caption>元素

浏览器支持


支持	支持	支持	支持	支持

HTML <button> 标签 HTML <center> 标签

评论区 0

发表评论

教程介绍

HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法。

50 章节

66 阅读

0 评论