Open In App

HTML <caption> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

The <caption> tag is used to specify the caption of a table. Only one caption can be specified for one table. It is by default aligned to the center and Specifically placed immediately after the <table> tag and before any <tr> or <th> tag elements.

Note: The <caption> tag also supports the Global Attributes and Event Attributes in HTML.

Syntax:

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

Attributes:

Attribute Value

Description

align

This attribute is used to specify the alignment of text content but is deprecated from HTML5.

Example 1: In this example we will add a caption to the table i.e. by default aligned to the center. 

html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>HTML5 caption Tag</title>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
    <h2>HTML <Caption Tag></h2>
  
    <table>
        <!-- Adding caption to the table -->
        <caption>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: In this example we will add a caption to the table and adding align attribute to it to align the caption to the left.

html




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>HTML5 caption Tag</title>
</head>
  
<body>
    <h1>GeeksForGeeks</h1>
    <h2>HTML <Caption Tag></h2>
  
    <table>
        <!-- Adding a caption to the table 
        and aligning it to the left-->
        <caption style="text-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: 

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 4


Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads