HTML - <caption> Tag

HTML <caption> tag is used to specify a caption for the <table> element. It serves as the table's title. It should be used inside the <table> tag.

There can only be one <caption> element per table. When the data in the table is unclear, the <caption> element might be useful. After defining the caption to the table element, one can describe the type of data in the table. A table caption will always be centred above a table by default. To align and position the caption, you can use the CSS properties text-align and caption-side.

Syntax

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

Attribute

HTML caption tag supports Global and Event attributes of HTML. A Specific attribute as well which is listed bellow.

Attribute	Value	Description
align	left right center justify	Specifies the alignment of text content(Deprecated).

Examples of HTML caption Tag

Bellow examples will illustrate the usage of caption tag. Where, when and how to use caption tag to give a title to a table.

Caption on Table

Let's consider the following example, where we are going to use the <caption> to give a title to a table.

<!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>

Caption Placement on Table

Considering another scenario where we are going to use the CSS caption-side property, this decides the position of caption element.

<!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>

Caption alignment on Table

In the following example, we are going to use the CSS property to make the caption align to the left. We can use the HTML align property for this but better not to use the deprecated attributes.

<!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>

Supported Browsers

Tag
caption	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm