HTML caption Tag

The <caption> tag in HTML is used to provide a title or caption for a table. It is specifically used within the <table> element to describe the content or purpose of the table.

Here’s an example of how the <caption> tag is used:

<table> 
    <caption>Monthly Sales</caption>
    <tr>
        <th>Product</th>
        <th>Quantity</th>
        <th>Revenue</th>
    </tr>
    <tr>
        <td>Product A</td>
        <td>100</td>
        <td>$5000</td>
    </tr>
    <tr>
        <td>Product B</td>
        <td>75</td>
        <td>$4000</td>
    </tr>
</table>

In the example above, the <caption> tag is used to provide a caption for the table, which states “Monthly Sales”. The <caption> element is placed immediately after the opening <table> tag and before the table rows and cells.

The caption typically appears centered above the table, visually separating it from the rest of the content. It helps users understand the purpose or context of the table.

It’s important to note that the <caption> tag should be used within the context of a <table> element. Each <table> element should have at most one <caption> element.

Additionally, you can style the caption using CSS to control its appearance, such as its font size, color, alignment, and other visual properties.

Here’s an example of applying CSS styles to a table caption:

<style>
    caption {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        text-align: center;
    }
</style>
<table>
    <caption>Monthly Sales</caption>
</table>

In the example above, the CSS styles are applied to the <caption> element. The caption will have a font size of 18 pixels, bold weight, a color of #333 (dark gray), and be centered using the text-align property.

Using the <caption> tag in HTML allows you to provide a descriptive title or caption for tables, enhancing accessibility and improving the overall understanding of the table’s content.