HTML怎么设置表格标题_HTMLtablecaption标签的使用方法和位置说明-html教程-PHP中文网

HTML怎么设置表格标题_HTMLtablecaption标签的使用方法和位置说明

看不見的法師

发布： 2025-09-26 19:52:01

原创

575人浏览过

caption标签用于为HTML表格提供标题，必须作为table的第一个或最后一个子元素；2. 默认显示在表格上方居中，可通过CSS的caption-side属性设为bottom或top；3. 提升可访问性、语义化和SEO，方便屏幕阅读器识别表格内容。

html怎么设置表格标题_htmltablecaption标签的使用方法和位置说明

在HTML中，表格标题可以通过 caption 标签来设置。这个标签专门用于为 table 元素提供一个描述性标题，帮助用户理解表格内容，提升可访问性和语义化结构。

caption标签的基本语法

caption 标签必须作为 table 元素的第一个或最后一个子元素出现（推荐放在第一个），用来定义表格的标题。它不需要额外属性，文本内容直接写在标签内即可。

基本写法如下：

<table><br>  <caption>2024年销售数据汇总</caption><br>  <tr><br>    <th>月份</th><br>    <th>销售额（万元）</th><br>  </tr><br>  <tr><br>    <td>1月</td><br>    <td>80</td><br>  </tr><br></table>

登录后复制

caption的位置和显示效果

caption 默认显示在表格的上方居中位置，但可以通过CSS控制其位置和样式。合法的位置值包括：top 和 bottom。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

立即学习“前端免费学习笔记（深入）”；

示例：将标题放在表格下方

<style><br>  caption {<br>    caption-side: bottom;<br>    font-size: 14px;<br>    color: #666;<br>  }<br></style><br><table><br>  <caption>数据来源：公司内部报表</caption><br>  <tr><th>项目</th><th>金额</th></tr><br>  <tr><td>A产品</td><td>50万</td></tr><br></table>

登录后复制