Table with Footer

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

.table-with-footer caption {
    caption-side: top;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: left;
    padding-bottom: 10px;
}

.table-with-footer th,
.table-with-footer td {
    border: 1px solid #ccc;
    padding: 10px 12px;
    text-align: left;
}

.table-with-footer thead th {
    background-color: #e9ecef;
}

/* Specific styling for the footer */
.table-with-footer tfoot {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #333;
}

/* For financial data, right-aligning numbers is common */
.table-with-footer .col-number {
    text-align: right;
}
</style>

<table class="table-with-footer">
    <caption>Monthly Expenses Report - May 2024</caption>
    <thead>
        <tr>
            <th scope="col">Expense Item</th>
            <th scope="col" class="col-number">Cost (USD)</th>
            <th scope="col" class="col-number">GST/VAT (USD)</th>
            <th scope="col" class="col-number">Total (USD)</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            
            <td colspan="3">Total Expenses</td>
            <td class="col-number">$5,108.50</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Office Rent</td>
            <td class="col-number">$2,500.00</td>
            <td class="col-number">$250.00</td>
            <td class="col-number">$2,750.00</td>
        </tr>
        <tr>
            <td>Software Subscriptions</td>
            <td class="col-number">$850.00</td>
            <td class="col-number">$85.00</td>
            <td class="col-number">$935.00</td>
        </tr>
        <tr>
            <td>Utilities (Power/Internet)</td>
            <td class="col-number">$425.00</td>
            <td class="col-number">$42.50</td>
            <td class="col-number">$467.50</td>
        </tr>
        <tr>
            <td>Office Supplies</td>
            <td class="col-number">$860.00</td>
            <td class="col-number">$95.00</td>
            <td class="col-number">$955.00</td>
        </tr>
    </tbody>
</table>