HTML - <caption> Tag

The 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> element, immediately following the start tag for the table. 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

Following is the syntax for HTML <caption> − 

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

Example

Let's consider the following example, where we are going to use the <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>

On running the above code, the output window will pop up, displaying the table applied with a caption on the webpage.

Example

Considering another scenario where we are going to use the CSS caption-side property.

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

When we execute the above code, it will generate an output consisting of the table applied with CSS and the caption of the table applied at the bottom displayed on the webpage.

Example

In the following example, we are going to use the CSS property to make the caption align to the left.

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

On running the above code, the output window will pop up, displaying the table along with a caption that is aligned to the left of the table.

Example

Following is an example where we are going to use the CSS property and align the caption to the right.

<!DOCTYPE html>
<html>
   <style>
      table,
      td,
      th {
         border: 2px solid #5DADE2;
      }
      
      .tutorial {
         text-align: right;
         color: #4A235A;
         background-color: #E5E8E8;
      }
   </style>
<body>
   <table>
      <caption class="tutorial">
         Cars And Countries
      </caption>
      <thead>
         <tr>
            <th>Name</th>
            <th>Country</th>
            <th>Engine</th>
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>Lamborghini</td>
            <td>Italy</td>
            <td>V12</td>
         </tr>
         <tr>
            <td>Volkswagen</td>
            <td>Germany</td>
            <td>1.4 TSI/TFSI</td>
         </tr>
         <tr>
            <td>Chevrolet</td>
            <td>United States</td>
            <td>1199 cc, 4 Cylinders Inline</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

When we execute the above code, it will generate an output consisting of a table along with the caption aligned to the right displayed on the webpage.

html_tags_reference.htm
Advertisements