1 Star 0 Fork 1

小弟调调 / html-tutorial

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
caption.md 1.68 KB
AI 代码解读
一键复制 编辑 原始数据 按行查看 历史
小弟调调 提交于 2022-05-04 01:20 . doc: update document.

HTML <caption> 标签

示例

带标题的表格:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

定义和用法

<caption> 标签定义了一个表格标题。

<caption> 标记必须紧跟在 <table> 标记之后。

提示: 默认情况下,表格标题将在表格上方居中对齐。 但是,CSS 属性 text-aligncaption-side 可用于对齐和放置标题。

浏览器支持

Element chrome edge firefox safari opera
<caption> Yes Yes Yes Yes Yes

全局属性

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

事件属性

<caption> 标签支持 HTML 中的事件属性

更多示例

位置表标题(使用 CSS):

<table>
  <caption style="text-align:right">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<br>

<table>
  <caption style="caption-side:bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

默认 CSS 设置

大多数浏览器将显示具有以下默认值的 <caption> 元素:

caption {
  display: table-caption;
  text-align: center;
}
1
https://gitee.com/jaywcjlove/html-tutorial.git
git@gitee.com:jaywcjlove/html-tutorial.git
jaywcjlove
html-tutorial
html-tutorial
main

搜索帮助