Menu

HTML caption Tag

HTML caption Tag

The HTML <caption> tag is used to provide a caption or a title for a table, describing what the table is about. The <caption> tag is used inside the <table> tag, just after the opening <table> tag.

A caption is a short description that provides a brief explanation about the table and helps you to understand its purpose. But a table should have only one caption.

For example: Suppose you have created a table having information about employees, then you can specify a caption to it like "Employee Details" using the <caption> tag.

HTML **<caption>** Tag - Syntax and Usage

The <caption> tag requires the start(opening) tag and end(closing) tag.

Given below is the required syntax for the same:

<caption>
    ...
</caption>

HTML <caption> Tag Basic Example

Below we have a basic example for using the <caption> tag:

<table>
    <caption> Title of Table </caption>
    <tr>
        <td> Column 1 </td>
        <td> Column 2 </td>
    </tr>
    <!-- more table rows -->
</table>

Now let's have another example with some data in the table,

<html>
    <head>
        <title>
            Example of adding caption to a table.
        </title>
    </head>
    <body>
        <table>
            <caption>
                Employee Details
            </caption>
            <tr>
                <th>Emp Id</th>
                <th>Emp Name</th>
                <th>Address</th>
                <th>Salary</th>
                
            </tr>
            <tr>
                <td>001</td>
                <td>aman</td>
                <td>Delhi</td>
                <td>50000/-</td>
            </tr>
             <tr>
                <td>002</td>
                <td>amit</td>
                <td>ghaziabad</td>
                <td>30000/-</td>
            </tr>
        </table>
    </body>
</html>

As you can see in the code example above, we have used the <caption> tag to add a caption/title for the table.

We can also add styling to the caption tag using the style attribute.

HTML <caption> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

Default CSS style for HTML <caption> Tag

caption {
    display: table-caption;
    text-align: center;
}

Browser Support for HTML <caption> Tag

Following browsers support this attribute:

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Safari 1+
  • Opera 4+