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

列印頁面