HTML - <caption> 标签

HTML <caption> 标签用于为 <table> 元素指定说明文字。它充当表格的标题。它应该用在 <table> 标签内部。

每个表格只能有一个 <caption> 元素。当表格中的数据不清楚时，<caption> 元素可能很有用。在为表格元素定义说明文字后，可以描述表格中数据的类型。默认情况下，表格说明文字始终居中显示在表格上方。要对齐和定位说明文字，可以使用 CSS 属性 text-align 和 caption-side。

语法

<caption>
  .....
</caption>

属性

HTML caption 标签支持 HTML 的全局和事件属性。以及下面列出的特定属性。

属性	值	描述
align	left right center justify	指定文本内容的对齐方式（已弃用）。

HTML caption 标签示例

下面的示例将说明 caption 标签的使用方法。在何处、何时以及如何使用 caption 标签为表格提供标题。

表格上的说明文字

让我们考虑以下示例，我们将使用 <caption> 为表格提供标题。

<!DOCTYPE html>
<html>
<body>
   <style>
      table,
      td,
      th {
         border: 4px solid #D2B4DE;
         border-collapse: collapse;
      }
   </style>
   <table>
      <caption>Employee Details</caption>
      <tr>
         <th>Name</th>
         <th>Department</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>Suma</td>
         <td>IT</td>
         <td>23</td>
      </tr>
      <tr>
         <td>Priya</td>
         <td>Development</td>
         <td>26</td>
      </tr>
      <tr>
         <td>Viswa</td>
         <td>BPO</td>
         <td>23</td>
      </tr>
   </table>
</body>
</html>

表格上的说明文字位置

考虑另一种情况，我们将使用 CSS caption-side 属性，它决定了 caption 元素的位置。

<!DOCTYPE html>
<html>
   <style>
   caption {
      background: #27AE60;
      color: #F7F9F9;
      caption-side: bottom;
   }
   table,
   th,
   td {
      border: 2px solid #5DADE2;
      padding: 2px;
   }
   </style>
<body>
   <table>
      <caption>TUTORIALSPOINT</caption>
      <tr>
         <th>Courses</th>
         <th>Price</th>
      </tr>
      <tr>
         <td>HTML</td>
         <td>100</td>
      </tr>
      <tr>
         <td>JAVA</td>
         <td>90</td>
      </tr>
   </table>
</body>
</html>

表格上的说明文字对齐

在以下示例中，我们将使用 CSS 属性使说明文字左对齐。我们可以为此使用 HTML align 属性，但最好不要使用已弃用的属性。

<!DOCTYPE html>
<html>
<body>
   <style>
      table,
      td,
      th {
         border: 2px solid #82E0AA;
      }
      </style>
      <table>
         <caption style="text-align: left">
            TFI
         </caption>
         <tr>
            <th>Actor</th>
            <th>Movie</th>
            <th>Age</th>
         </tr>
         <tr>
            <td>Pavankalyan</td>
            <td>Jalsa</td>
            <td>25</td>
         </tr>
         <tr>
            <td>Ram</td>
            <td>Hyper</td>
            <td>28</td>
         </tr>
         <tr>
            <td>Arjun</td>
            <td>Bunny</td>
            <td>26</td>
         </tr>
      </table>
</body>
</html>

支持的浏览器

标签
caption	是	是	是	是	是

html_tags_reference.htm

打印页面