HTML <caption> Tag

The HTML <caption> tag is used to specify a title or description for a table. It provides a way to describe the purpose or context of the table for users and assistive technologies.

The <caption> tag must be placed immediately after the <table> tag, and each table can have only one caption.

Basic Example of HTML <caption> Tag

Here’s a simple example demonstrating the use of the <caption> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <body>
        <h2>Caption Example</h2>
        <table border="1">
            <caption>Monthly Sales Data</caption>
            <tr>
                <th>Month</th>
                <th>Sales</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$10,000</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$12,000</td>
            </tr>
        </table>
    </body>
</html>
Basic Example of HTML <caption> Tag

Explanation: The <caption> tag specifies the title of the table. Most browsers display the caption centered above the table by default.

Attributes of HTML <caption> Tag

The <caption> tag does not have any specific attributes, but it can be styled using CSS.

Styling the <caption> Tag

The <caption> tag can be styled with CSS to change its appearance:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            caption {
                font-size: 20px;
                font-weight: bold;
                color: #007BFF;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <h2>Styled Caption Example</h2>
        <table border="1">
            <caption>Quarterly Performance</caption>
            <tr>
                <th>Quarter</th>
                <th>Revenue</th>
            </tr>
            <tr>
                <td>Q1</td>
                <td>$25,000</td>
            </tr>
            <tr>
                <td>Q2</td>
                <td>$30,000</td>
            </tr>
        </table>
    </body>
</html>
Styling the <caption> Tag

In this example, the caption is styled to stand out with larger text, bold weight, and a blue color.

Special Cases for HTML <caption> Tag

Positioning the Caption

Although the <caption> tag is displayed above the table by default, you can reposition it using CSS:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <head>
        <style>
            caption {
                caption-side: bottom;
                font-style: italic;
            }
        </style>
    </head>
    <body>
        <h2>Bottom Caption Example</h2>
        <table border="1">
            <caption>Data provided by the finance department</caption>
            <tr>
                <th>Month</th>
                <th>Profit</th>
            </tr>
            <tr>
                <td>March</td>
                <td>$15,000</td>
            </tr>
            <tr>
                <td>April</td>
                <td>$18,000</td>
            </tr>
        </table>
    </body>
</html>

Result: The caption is displayed below the table because of the caption-side: bottom; CSS property.

Positioning the Caption in a Table

Multi-Line Captions

You can include multi-line captions by using line breaks <br> or wrapping text inside the <caption> tag:

index.html

</>
Copy
<!DOCTYPE html>
<html>
    <style>
      table {
        width: 100%;
      }
      </style>
    <body>
        <h2>Multi-Line Caption Example</h2>
        <table border="1">
            <caption>
                Annual Report<br>Revenue and profit analysis for 2024
            </caption>
            <tr>
                <th>Year</th>
                <th>Revenue</th>
            </tr>
            <tr>
                <td>2023</td>
                <td>$150,000</td>
            </tr>
            <tr>
                <td>2024</td>
                <td>$200,000</td>
            </tr>
        </table>
    </body>
</html>
Multi-Line Captions