HTML 中的 Caption 标签

2025 年 3 月 25 日 | 阅读 6 分钟

在本文中，我们将学习 HTML 中的 caption 标签以及如何使用它。

HTML <caption> 标签用于为 HTML 表格添加标题或名称。它应该在 <table> 元素内部，并且紧跟在 <table> 开始标签之后。一个表格只能包含一个 <caption> 元素。

语法

以下是关于 <caption> 标签的一些规格说明

显示	内联
开始标签/结束标签	包含开始和结束标签
用途	文本

<caption> 标签示例

我们将创建一个表格，并使用 <caption> 标签将表格的标题设置为“员工详情”。

代码

<!DOCTYPE html>
<html>
<head>
	<title>Caption Tag</title>
	<style>
		table, td, th {
        border: 3px solid gray;
        border-collapse: collapse;}
	</style>
 </head>
 <body>
    <h2>Example of Caption tag</h2>
   <table width="800">
	  <caption>Employee Details</caption>
      <thead>
     	<tr>
     		<th>Sr. No.</th>
     		<th>Name</th>
     		<th>Email</th>
     	  </tr>
        </thead>
       <tbody>
    	<tr>
    		<td>1.</td>
    		<td>Ankit Pandey</td>
    		<td>ankit2@gmail.com</td>
    	</tr>
    	<tr>
    		<td>2.</td>
    		<td>Ashvini Kumar</td>
    		<td>ashvini@gmail.com</td>
    	</tr>
    	<tr>
    		<td>3.</td>
    		<td>Swati Sharma</td>
    		<td>swati8@gmail.com</td>
    	</tr>
    </tbody>
</table>
</body>
</html>

输出

表格及其在输出中显示的标题可以在下方看到。默认情况下，标题会居中对齐在顶部。

"align" 属性

我们可以使用 "align" 属性将标题对齐到表格的底部或顶部。

注意： "align" 属性在 HTML5 中已被弃用，不推荐使用。我们可以改用 "text-align" CSS 属性。

语法

align="值"

使用 "align" 属性演示 <caption> 标签

演示 1

在此示例中，我们将构建一个家用电器详情表，并将表格标题对齐到顶部。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Caption of HTML table aligned to top</title>
  </head>
  
  <style>
    table,
    td,
    th {
      border: 2px solid rgb(192, 88, 241);
    }

  </style>
  
  <body>
    <table>
      <caption align="top">
        Electrical Appliances
      </caption>
      
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Brand</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>501</td>
          <td>Washing Machine</td>
          <td>Whirlpool</td>
          <td>2</td>
          <td>45,000</td>
        </tr>
        
        <tr>
          <td>502</td>
          <td>Refrigerator</td>
          <td>LG</td>
          <td>1</td>
          <td>36,000</td>
        </tr>
        
        <tr>
          <td>503</td>
          <td>Mixer Grinder</td>
          <td>Philips</td>
          <td>2</td>
          <td>18,000</td>
        </tr>
        <tr>
          <td>504</td>
          <td>Water Heater</td>
          <td>Havells</td>
          <td>5</td>
          <td>30,000</td>
        </tr>
        
        <tr>
          <td>505</td>
          <td>Coffee Machine</td>
          <td>Nespresso Vertuo Next</td>
          <td>1</td>
          <td>25,000</td>
        </tr>

         <tr>
          <td>506</td>
          <td>Air Conditioner</td>
          <td>Voltas</td>
          <td>2</td>
          <td>90,000</td>
        </tr>
        
      </tbody>
    </table>
  </body>
</html>

输出

在这里的输出中，我们可以看到表格标题位于表格顶部。

演示 2

在此演示中，我们将构建一个文具产品详情表，并将表格标题对齐到底部。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Table aligned to bottom in HTML </title>
  </head>
  
  <style>
    table,
    td,
    th {
      border: 1px solid rgb(23, 205, 68);
    }

  </style>
  
  <body>
    <table>
      <caption align="bottom">
        Stationery Product Details
      </caption>
      
      <thead>
        <tr>
          <th>Product ID</th>
          <th>Product name</th>
          <th>Product Brand</th>
          <th>Quantity</th>
          <th>Price</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>01</td>
          <td>Pens</td>
          <td>Cello</td>
          <td>1000</td>
          <td>10,000</td>
        </tr>
        
        <tr>
          <td>02</td>
          <td>Notebooks</td>
          <td>Classmate</td>
          <td>150</td>
          <td>4,500</td>
        </tr>
        
        <tr>
          <td>03</td>
          <td>Fevicol Box</td>
          <td>Pidilite</td>
          <td>200</td>
          <td>10,000</td>
        </tr>
        <tr>
          <td>04</td>
          <td>Eraser Box</td>
          <td>Apsara</td>
          <td>1000</td>
          <td>20,000</td>
        </tr>
        
        <tr>
          <td>05</td>
          <td>Water Color Set</td>
          <td>Camel</td>
          <td>500</td>
          <td>50,000</td>
        </tr>

         <tr>
          <td>06</td>
          <td>Paintbrush Set</td>
          <td>Camlin</td>
          <td>250</td>
          <td>3,750</td>
        </tr>
        
      </tbody>
    </table>
  </body>
</html>

输出

在这里的输出中，我们可以看到表格标题位于表格底部。

"text-align" CSS 属性

我们可以使用 "align" 属性将标题对齐到表格的底部或顶部。

语法

"text-align" 是上面语法中的 CSS 属性，它有四个值，如下所述

Left（左对齐）：将文本左对齐。
Right（右对齐）：将文本右对齐。
Center（居中）：将文本居中对齐。
Justify（两端对齐）：将文本两端对齐。

使用 "text-align" CSS 属性演示 <caption> 标签

我们将使用 "text-align" CSS 属性来设置表格的标题，因此在这些示例中，我们将表格标题设置为左对齐、右对齐、居中对齐和两端对齐。

插图 1

在此示例中，我们将把标题对齐到表格的左侧。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Table caption aligned to the left of table-1 utilizing CSS property called "text-align"</title>
  </head>

  <style>
    table,
    td,
    th {
      border: 1px solid rgb(248, 129, 129);
    }
    caption {
      background-color: rgb(248, 187, 187);
    }
    .table1 {
        text-align: left;
    }
  </style>
  
  <body>
    <h3>Aligning caption on the table's left side</h3>
    <table>
      <caption class="table1">
        Student Details
      </caption>
      
      <thead>
        <tr>
          <th>Student ID</th>
          <th>First name</th>
          <th>Last name</th>
          <th>Age</th>
          <th>Course</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>1001</td>
          <td>Arpit</td>
          <td>Singh</td>
          <td>18</td>
          <td>Hotel Management</td>
        </tr>
        
        <tr>
          <td>1002</td>
          <td>Ayush</td>
          <td>Khurana</td>
          <td>21</td>
          <td>Bachelor of Science</td>
        </tr>
        
        <tr>
          <td>1003</td>
          <td>Himesh</td>
          <td>Kumar</td>
          <td>19</td>
          <td>Telecommunication Engineering</td>
        </tr>
        <tr>
          <td>1004</td>
          <td>Rakhi</td>
          <td>Kapoor</td>
          <td>18</td>
          <td>Aeronautical Engineering</td>
        </tr>
        
        <tr>
          <td>1005</td>
          <td>Pooja</td>
          <td>Singh</td>
          <td>19</td>
          <td>Fashion Designing</td>
        </tr>

         <tr>
          <td>1006</td>
          <td>Aryan</td>
          <td>Kumar</td>
          <td>20</td>
          <td>Bachelor of Technology</td>
        </tr>
        
      </tbody>
    </table>
  </body>
</html>

输出

这是输出；我们可以看到表格标题位于表格的左侧。

插图 2

在此示例中，我们将把标题对齐到表格的右侧。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Table caption aligned to the right of table-2 utilizing CSS property called "text-align"</title>
  </head>

  <style>
    table,
    td,
    th {
      border: 1px solid rgb(248, 129, 129);
    }
    caption {
      background-color: rgb(248, 187, 187);
    }
    .table2 {
        text-align: right;
    }
  </style>
  
  <body>
    <h3>Caption aligned on the table's right side</h3>
    <table>
        <caption class="table2">
          Student Details
        </caption>
        
        <thead>
          <tr>
            <th>Student ID</th>
            <th>First name</th>
            <th>Last name</th>
            <th>Age</th>
            <th>Course</th>
          </tr>
        </thead>
        
        <tbody>
          <tr>
            <td>1007</td>
            <td>Arhan</td>
            <td>Khan</td>
            <td>19</td>
            <td>Telecommunication Engineering</td>
          </tr>
          
          <tr>
            <td>1008</td>
            <td>Anshuman</td>
            <td>Singh</td>
            <td>19</td>
            <td>Electrical Engineering</td>
          </tr>
          
          <tr>
            <td>1009</td>
            <td>Shiva</td>
            <td>Singh</td>
            <td>20</td>
            <td>Fashion Designing</td>
          </tr>
          <tr>
            <td>1010</td>
            <td>Rohan</td>
            <td>Kumar</td>
            <td>20</td>
            <td>Bachelor of Technology</td>
          </tr>
          
          <tr>
            <td>1011</td>
            <td>Mansi</td>
            <td>Kapoor</td>
            <td>21</td>
            <td>Automobile Engineering</td>
          </tr>
  
           <tr>
            <td>1012</td>
            <td>Nikita</td>
            <td>Kapoor</td>
            <td>19</td>
            <td>Bachelor of Science</td>
          </tr>
          
        </tbody>
      </table>
  </body>
</html>

输出

这是输出；我们可以看到表格标题位于表格的右侧。

插图 3

在此示例中，我们将把标题对齐到表格的中间。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Table caption aligned to the center of table-3 utilizing CSS property called "text-align"</title>
  </head>

  <style>
    table,
    td,
    th {
      border: 1px solid rgb(248, 129, 129);
    }
    caption {
      background-color: rgb(248, 187, 187);
    }
    .table3 {
        text-align: center;
    }
  </style>
  
  <body>
    <h3>Caption aligned at the center of the table</h3>
    <table>
      <caption class="table3">
        Employee Details
      </caption>
      
      <thead>
        <tr>
          <th>Employee ID</th>
          <th>Employee name</th>
          <th>Age</th>
          <th>Department</th>
          <th>Salary</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>111</td>
          <td>Henry</td>
          <td>25</td>
          <td>Marketing</td>
          <td>50,000</td>
        </tr>
        
        <tr>
          <td>112</td>
          <td>David</td>
          <td>28</td>
          <td>Marketing</td>
          <td>55,000</td>
        </tr>
        
        <tr>
          <td>113</td>
          <td>Emma</td>
          <td>26</td>
          <td>Finance</td>
          <td>45,000</td>
        </tr>
        <tr>
          <td>114</td>
          <td>James</td>
          <td>24</td>
          <td>IT</td>
          <td>42,000</td>
        </tr>
        
        <tr>
          <td>115</td>
          <td>Andrew</td>
          <td>27</td>
          <td>IT</td>
          <td>57,000</td>
        </tr>

         <tr>
          <td>116</td>
          <td>Anthony</td>
          <td>28</td>
          <td>IT</td>
          <td>58,000</td>
        </tr>
        
      </tbody>
    </table>
  </body>
</html>

输出

这是输出；我们可以看到表格标题位于表格的中间。

插图 4

在此示例中，我们将把标题设置为“两端对齐”。

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Table caption aligned to justify utilizing CSS property called "text-align"</title>
  </head>

  <style>
    table,
    td,
    th {
      border: 1px solid rgb(248, 129, 129);
    }
    caption {
      background-color: rgb(248, 187, 187);
    }
    .table4 {
        text-align: justify;
    }
  </style>
  
  <body>
    <h3>Caption aligned to justify</h3>
    <table>
      <caption class="table4">
        Employee Details
      </caption>
      
      <thead>
        <tr>
          <th>Employee ID</th>
          <th>Employee name</th>
          <th>Age</th>
          <th>Department</th>
          <th>Salary</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>117</td>
          <td>Samantha</td>
          <td>21</td>
          <td>Finance</td>
          <td>36,000</td>
        </tr>
        
        <tr>
          <td>118</td>
          <td>Patrick</td>
          <td>30</td>
          <td>Marketing</td>
          <td>65,000</td>
        </tr>
        
        <tr>
          <td>119</td>
          <td>Jonathan</td>
          <td>28</td>
          <td>Marketing</td>
          <td>50,000</td>
        </tr>
        <tr>
          <td>120</td>
          <td>Blake</td>
          <td>28</td>
          <td>Finance</td>
          <td>55,000</td>
        </tr>
        
        <tr>
          <td>121</td>
          <td>Albert</td>
          <td>25</td>
          <td>IT</td>
          <td>65,000</td>
        </tr>

         <tr>
          <td>122</td>
          <td>Charlie</td>
          <td>36</td>
          <td>IT</td>
          <td>70,000</td>
        </tr>
        
      </tbody>
    </table>
  </body>
</html>

输出

在输出中，我们可以看到表格标题已设置为两端对齐。

属性

标签特定属性

属性	值	描述
align	top bottom (底部) 左右	它相对于表格对齐标题。

全局属性

<caption> 标签支持全局属性

事件属性

<caption> 标签支持事件属性。

支持的浏览器

以下是支持 <caption> 标签的浏览器

谷歌浏览器
Internet Explorer (IE)
火狐
Opera
Safari

结论

在本篇文章中，我们了解了 HTML 中的 caption 标签。一些重要的要点如下

我们可以使用 "align" 属性以两种不同的方式放置表格的标题
- align="bottom"（底部）：将标题对齐到表格底部。
- align="top"（顶部）：将标题对齐到表格顶部。
我们可以使用 "text-align" CSS 属性以四种不同的方式放置表格的标题
- Text-align: left;（左对齐）：将文本放置在左侧。
- Text-align: right;（右对齐）：将文本放置在右侧。
- Text-align: center;（居中）：将文本放置在中间。
- Text-align: justify;（两端对齐）：将文本设置为两端对齐。

下一个主题HTML Center 标签

HTML 中的 Caption 标签

语法

<caption> 标签示例

"align" 属性

注意： "align" 属性在 HTML5 中已被弃用，不推荐使用。我们可以改用 "text-align" CSS 属性。

语法

使用 "align" 属性演示 <caption> 标签

"text-align" CSS 属性

语法

使用 "text-align" CSS 属性演示 <caption> 标签

属性

标签特定属性

全局属性

事件属性

支持的浏览器

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 中的 Caption 标签

语法

<caption> 标签示例

"align" 属性

注意： "align" 属性在 HTML5 中已被弃用，不推荐使用。我们可以改用 "text-align" CSS 属性。

语法

使用 "align" 属性演示 <caption> 标签

"text-align" CSS 属性

语法

使用 "text-align" CSS 属性演示 <caption> 标签

属性

标签特定属性

全局属性

事件属性

支持的浏览器

结论

相关帖子

HTML template 标签

HTML data 标签

HTML dialog 标签

HTML var 标签

HTML <ol> 标签

HTML <iframe> 标签

HTML <h1> 到 <h6> 标签

HTML s 标签

HTML section 标签

HTML aside 标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器