HTML | caption Tag - GeeksforGeeks

The caption Tag is used to specify the caption of a table. This tag will be inserted just after the <table> tag. Only one caption can be specified for one table. It is by default aligned to the center.

Syntax:

<caption align = "value" > </caption>

where value can be:

left: Used to align the caption to the left of the table.
center: Used to align the caption at the top-center of the table.
right: Used to align the caption to the right of the table.

Below programs illustrate the <caption> tag in HTML:

Example-1: Adding a caption to the table i.e. by default aligned to the center.

<!-- HTML code to show the working of caption tag -->
<!DOCTYPE html>  
<html>  
  
<head>  
    <style>  
        table,  
        th,  
        td {  
            border: 1px solid black;  
        }  
        #GFG { 
            font-size:25px; 
            color:green; 
        } 
    </style>  
</head>  
  
<body>  
    <h1 style="color:green;font-size:35px;">  
    GeeksForGeeks  
    </h1>  
    <h2>HTML <Caption> Tag</h2>  
      
    <table>  
        <!-- Adding caption to the table -->
        <caption id="GFG">Students</caption>  
        <tr>  
            <th>Firstname</th>  
            <th>Lastname</th>  
            <th>Age</th>  
        </tr>  
        <tr>  
            <td>Priya</td>  
            <td>Sharma</td>  
            <td>24</td>  
        </tr>  
        <tr>  
            <td>Arun</td>  
            <td>Singh</td>  
            <td>32</td>  
        </tr>  
        <tr>  
            <td>Sam</td>  
            <td>Watson</td>  
            <td>41</td>  
        </tr>  
    </table>  
</body>  
  
</html>  

Output:

Example-2: Adding a caption to the table and adding align attribute to it to align the caption to the left/right.

<!-- HTML code to show the working of caption tag -->
<!DOCTYPE html>  
<html>  
  
<head>  
    <style>  
        table,  
        th,  
        td {  
            border: 1px solid black;  
        }  
        #GFG { 
            font-size:25px; 
            color:green; 
        } 
    </style>  
</head>  
  
<body>  
    <h1 style="color:green;font-size:35px;">  
    GeeksforGeeks  
    </h1>  
    <h2>HTML <Caption> Tag</h2>  
      
    <table>  
        <!-- Adding a caption to the table  
            and aligning it to the left-->
        <caption id="GFG" align = "left" >Students</caption>  
        <tr>  
            <th>Firstname</th>  
            <th>Lastname</th>  
            <th>Age</th>  
        </tr>  
        <tr>  
            <td>Priya</td>  
            <td>Sharma</td>  
            <td>24</td>  
        </tr>  
        <tr>  
            <td>Arun</td>  
            <td>Singh</td>  
            <td>32</td>  
        </tr>  
        <tr>  
            <td>Sam</td>  
            <td>Watson</td>  
            <td>41</td>  
        </tr>  
    </table>  
</body>  
  
</html>  

Output:

Supported Browsers: The browser supported by <HTML> Caption Tag are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: