Financial Data Table

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

.financial-table caption {
    caption-side: bottom;
    text-align: right;
    font-size: 0.85rem;
    color: #666;
    padding-top: 10px;
}

.financial-table thead th {
    background-color: #f2f2f2;
    border-bottom: 2px solid #333;
    padding: 12px;
    font-weight: bold;
    text-align: left; /* Headers are usually left-aligned */
}

.financial-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

/* --- Key Formatting Classes --- */

/* For header cells that should be right-aligned */
.financial-table .th-number {
    text-align: right;
}

/* For all numerical data cells */
.financial-table .td-number {
    text-align: right;
    /* Using a monospaced font for clean number alignment */
    font-family: 'Courier New', Courier, monospace; 
}

.financial-table .positive {
    color: #27ae60; /* A pleasant green */
}
.financial-table .negative {
    color: #c0392b; /* A non-garish red */
}
</style>

<table class="financial-table">
    <thead>
        <tr>
            <th scope="col">Stock / Symbol</th>
            <th scope="col" class="th-number">Shares</th>
            <th scope="col" class="th-number">Last Price</th>
            <th scope="col" class="th-number">Change ($)</th>
            <th scope="col" class="th-number">Change (%)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apple Inc. (AAPL)</td>
            <td class="td-number">50</td>
            <td class="td-number">$170.15</td>
            <td class="td-number positive">+1.25</td>
            <td class="td-number positive">+0.74%</td>
        </tr>
        <tr>
            <td>Google (GOOGL)</td>
            <td class="td-number">25</td>
            <td class="td-number">$2,830.45</td>
            <td class="td-number negative">-5.80</td>
            <td class="td-number negative">-0.20%</td>
        </tr>
        <tr>
            <td>Microsoft (MSFT)</td>
            <td class="td-number">40</td>
            <td class="td-number">$305.60</td>
            <td class="td-number positive">+2.10</td>
            <td class="td-number positive">+0.69%</td>
        </tr>
        <tr>
            <td>Amazon (AMZN)</td>
            <td class="td-number">15</td>
            <td class="td-number">$3,401.80</td>
            <td class="td-number negative">-15.40</td>
            <td class="td-number negative">-0.45%</td>
        </tr>
    </tbody>
</table>