HTML <caption> 标签详解：表格标题的完整指南
HTML <caption> 标签用于为表格添加标题或说明文字，它必须位于 <table> 元素内且紧随 <table> 开始标签之后。每个表格只能包含一个 <caption> 元素。
基本语法
<table>
<caption>表格标题内容</caption>
<!-- 表格其他内容 -->
</table>
基本用法示例
下面是一个简单的示例，展示如何使用 <caption> 标签为表格添加标题：
<!DOCTYPE html>
<html>
<head>
<title>caption 标签示例 - 代码号</title>
<style>
table, td, th {
border: 1px solid #ccc;
border-collapse: collapse;
padding: 8px;
}
table {
width: 100%;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>学生信息表</h2>
<table>
<caption>2025年计算机专业学生名单</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>邮箱</th>
<th>专业</th>
</tr>
</thead>
<tbody>
<tr>
<td>2025001</td>
<td>张三</td>
<td>alan@ebingou.cn</td>
<td>软件工程</td>
</tr>
<tr>
<td>2025002</td>
<td>李四</td>
<td>lisi@ebingou.cn</td>
<td>人工智能</td>
</tr>
<tr>
<td>2025003</td>
<td>王五</td>
<td>wangwu@ebingou.cn</td>
<td>数据科学</td>
</tr>
</tbody>
</table>
</body>
</html>
表格标题对齐方式
使用 align 属性（已过时）
虽然不推荐使用，但了解 align 属性对于维护旧代码很有帮助：
<table>
<caption align="top">顶部标题</caption>
<!-- 或 -->
<caption align="bottom">底部标题</caption>
<!-- 表格内容 -->
</table>
使用 CSS 进行样式控制（推荐）
现代网页开发中，建议使用 CSS 来控制标题的样式和对齐方式：
<!DOCTYPE html>
<html>
<head>
<title>CSS控制表格标题 - 代码号编程学习</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
/* 顶部居中标题 */
.caption-top {
caption-side: top;
text-align: center;
font-weight: bold;
font-size: 1.2em;
padding: 10px;
background-color: #f5f5f5;
}
/* 底部右对齐标题 */
.caption-bottom {
caption-side: bottom;
text-align: right;
font-style: italic;
padding: 10px;
color: #666;
}
/* 左侧对齐标题 */
.caption-left {
caption-side: top;
text-align: left;
font-weight: bold;
padding: 10px 0;
border-bottom: 2px solid #4CAF50;
}
</style>
</head>
<body>
<h2>不同样式的表格标题</h2>
<!-- 顶部居中标题 -->
<table>
<caption class="caption-top">商品库存表</caption>
<thead>
<tr>
<th>产品ID</th>
<th>产品名称</th>
<th>库存数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>P001</td>
<td>笔记本电脑</td>
<td>15</td>
<td>¥5,999</td>
</tr>
<tr>
<td>P002</td>
<td>无线鼠标</td>
<td>42</td>
<td>¥199</td>
</tr>
</tbody>
</table>
<!-- 底部右对齐标题 -->
<table>
<caption class="caption-bottom">数据更新时间：2025年</caption>
<thead>
<tr>
<th>月份</th>
<th>销售额</th>
<th>增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>1月</td>
<td>¥125,000</td>
<td>+15%</td>
</tr>
<tr>
<td>2月</td>
<td>¥138,000</td>
<td>+10.4%</td>
</tr>
</tbody>
</table>
<!-- 左侧对齐标题 -->
<table>
<caption class="caption-left">项目进度表</caption>
<thead>
<tr>
<th>任务名称</th>
<th>负责人</th>
<th>截止日期</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>需求分析</td>
<td>张三</td>
<td>2025-03-15</td>
<td>已完成</td>
</tr>
<tr>
<td>UI设计</td>
<td>李四</td>
<td>2025-04-10</td>
<td>进行中</td>
</tr>
</tbody>
</table>
</body>
</html>
实际应用示例
示例1：课程表
<!DOCTYPE html>
<html>
<head>
<title>课程表示例 - 代码号编程学习</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.schedule {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.schedule caption {
font-size: 1.5em;
font-weight: bold;
padding: 15px;
background-color: #4CAF50;
color: white;
border-radius: 5px 5px 0 0;
}
.schedule th, .schedule td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
.schedule th {
background-color: #f2f2f2;
}
.schedule tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<table class="schedule">
<caption>2025年春季学期课程表</caption>
<thead>
<tr>
<th>时间/日期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<tr>
<td>08:00-09:40</td>
<td>Web前端开发</td>
<td></td>
<td>数据结构</td>
<td></td>
<td>Web前端开发</td>
</tr>
<tr>
<td>10:00-11:40</td>
<td>数据库原理</td>
<td>数据结构</td>
<td></td>
<td>算法设计</td>
<td></td>
</tr>
<tr>
<td>14:00-15:40</td>
<td></td>
<td>Web前端开发实验</td>
<td>数据库实验</td>
<td></td>
<td>算法设计</td>
</tr>
<tr>
<td>16:00-17:40</td>
<td>算法设计</td>
<td></td>
<td></td>
<td>数据结构实验</td>
<td>数据库原理</td>
</tr>
</tbody>
</table>
</body>
</html>
示例2：员工绩效表
<!DOCTYPE html>
<html>
<head>
<title>员工绩效表示例 - 代码号教程</title>
<style>
.performance {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.performance caption {
font-size: 1.4em;
font-weight: bold;
padding: 15px;
background-color: #2196F3;
color: white;
border-radius: 5px 5px 0 0;
}
.performance th, .performance td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
.performance th {
background-color: #f5f5f5;
}
.performance tr:hover {
background-color: #f1f1f1;
}
.high {
background-color: #E8F5E9;
}
.medium {
background-color: #FFF9C4;
}
.low {
background-color: #FFEBEE;
}
</style>
</head>
<body>
<table class="performance">
<caption>2025年第一季度员工绩效评估</caption>
<thead>
<tr>
<th>员工ID</th>
<th>姓名</th>
<th>部门</th>
<th>完成任务数</th>
<th>工作效率</th>
<th>团队合作</th>
<th>综合评分</th>
</tr>
</thead>
<tbody>
<tr class="high">
<td>E1001</td>
<td>张明</td>
<td>开发部</td>
<td>28</td>
<td>A</td>
<td>A</td>
<td>95</td>
</tr>
<tr class="high">
<td>E1002</td>
<td>李华</td>
<td>设计部</td>
<td>25</td>
<td>A</td>
<td>B+</td>
<td>92</td>
</tr>
<tr class="medium">
<td>E1003</td>
<td>王芳</td>
<td>市场部</td>
<td>22</td>
<td>B+</td>
<td>B+</td>
<td>85</td>
</tr>
<tr class="medium">
<td>E1004</td>
<td>赵强</td>
<td>开发部</td>
<td>20</td>
<td>B</td>
<td>A</td>
<td>83</td>
</tr>
<tr class="low">
<td>E1005</td>
<td>陈静</td>
<td>市场部</td>
<td>18</td>
<td>B</td>
<td>B</td>
<td>78</td>
</tr>
</tbody>
</table>
</body>
</html>
本节课程知识要点
-
caption 标签位置：必须直接放在
<table>开始标签之后，每个表格只能有一个 caption 元素。 -
语义化价值：caption 为表格提供标题，增强可访问性和SEO价值，帮助屏幕阅读器用户理解表格内容。
-
样式控制方法：
-
使用
caption-sideCSS属性控制标题位置（top或bottom） -
使用
text-align属性控制文本对齐方式 -
可以应用所有常规文本样式属性
-
-
响应式设计考虑：在为移动设备设计表格时，考虑调整caption字体大小和布局确保可读性。
-
可访问性实践：确保caption准确描述表格内容，这对于依赖辅助技术的用户至关重要。
浏览器兼容性
HTML <caption> 标签被所有现代浏览器支持，包括：
| 标签 |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| <caption> | 支持 | 支持 | 支持 | 支持 | 支持 |
HTML <caption> 标签是表格结构中的重要元素，它为数据表格提供上下文和说明。通过合理使用caption标签并结合CSS样式，可以创建出既美观又具有良好可访问性的数据表格。在实际开发中，建议始终为数据表格添加适当的标题，以提升用户体验和网站的可访问性标准。
