HTML

Accessible Data Table

admin by @admin ADMIN
5d ago
May 31, 2026
Public
0 0 up · 0 down Sign in to vote
Real tables need `<caption>`, `<thead>` / `<tbody>` / `<tfoot>`, and `<th scope="col">` headers. Screen readers use these to announce column/row context on every cell.
HTML
Raw
<table>
    <caption>Quarterly revenue by region — 2025</caption>

    <thead>
        <tr>
            <th scope="col">Region</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
            <th scope="col">Q3</th>
            <th scope="col">Q4</th>
            <th scope="col">Total</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <th scope="row">North America</th>
            <td>$420k</td><td>$510k</td><td>$580k</td><td>$640k</td><td>$2.15M</td>
        </tr>
        <tr>
            <th scope="row">Europe</th>
            <td>$310k</td><td>$345k</td><td>$390k</td><td>$420k</td><td>$1.47M</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>$730k</td><td>$855k</td><td>$970k</td><td>$1.06M</td><td>$3.62M</td>
        </tr>
    </tfoot>
</table>
Tags

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.