Table with Caption Template

Properly title your data table with the semantic caption element for improved accessibility and context.

A caption acts as the official heading for your table, clearly describing its contents to all users, including those using assistive technologies.

Screenshot of an HTML table that has a clear title placed directly above the table content.

Get Source Code → Preview →

About the Table Caption

While you can always put a heading element (like h3) above a table, the most semantically correct way to title a table is with the caption tag. This element must be the first child of the table element. Using it programmatically links the title directly to the table it describes. This template provides a clean example of its implementation and styling.

Key Features:

Semantically Correct: Uses the HTML standard for titling tables, which is better than a generic heading tag.
Improved Accessibility: Screen readers announce the caption when they encounter a table, giving users with visual impairments immediate context about the data.
Easy Styling: The caption can be styled with CSS like any other text element. The CSS property caption-side can also move it to the bottom.
Clear Context: A caption ensures there's no ambiguity about what the table data represents.

Ideal Use Cases:

Scientific or academic reports where figures and tables must be properly labeled.
Financial statements that require clear titling (e.g., "Q3 2024 Earnings Report").
Any document or webpage where multiple tables appear, and each needs a distinct title.
Whenever you need to be compliant with accessibility standards like WCAG.

Dependencies:

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the table with a caption:

/* --- Caption Styling --- */
.table-with-caption caption {
    /* Required to be the 'title' of the table */
    caption-side: top; /* 'top' is default, can also be 'bottom' */
    
    font-size: 1.2rem;
    font-weight: bold;
    text-align: left;
    color: #333;
    padding-bottom: 10px;
}

.table-with-caption thead th {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 10px;
    text-align: left;
}

.table-with-caption td {
    border: 1px solid #dee2e6;
    padding: 10px;
}
</style>

<table class="table-with-caption">
    <caption>Quarterly Sales by Region - Q2 2024</caption>
    <thead>
        <tr>
            <th scope="col">Region</th>
            <th scope="col">Total Sales (USD)</th>
            <th scope="col">Units Sold</th>
            <th scope="col">Top Performing Product</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>North America</td>
            <td>$1,250,000</td>
            <td>3,450</td>
            <td>Widget Pro</td>
        </tr>
        <tr>
            <td>Europe</td>
            <td>$980,000</td>
            <td>2,800</td>
            <td>Widget Standard</td>
        </tr>
        <tr>
            <td>Asia-Pacific</td>
            <td>$1,520,000</td>
            <td>4,100</td>
            <td>Gadget Plus</td>
        </tr>
        <tr>
            <td>Latin America</td>
            <td>$450,000</td>
            <td>1,200</td>
            <td>Widget Pro</td>
        </tr>
    </tbody>
</table>

View Output