Table with Caption

<!DOCTYPE html>
<title>My Example</title>

/* --- 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>