Table Tags Cheatsheet

"A quick reference for Table tags you'll actually use"

Updated July 2026

Table, Table Caption, Column Group, Column, Table Body, Table Row, Table Header Cell, Table Data Cell,
Table Footer

Table

<table>
    <caption>Monthly Expenses</caption>
    <thead>
        <tr>
            <th>Item</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Internet</td>
            <td>$30</td>
        </tr>
    </tbody>
</table>

Table Caption

<table>
    <caption>Student Exam Results 2026</caption>
    <tr>
        <th>Name</th>
        <th>Grade</th>
    </tr>
</table>

Column Group

<table>
    <colgroup>
        <col span="2" class="highlight-group" />
    </colgroup>
    <tr>
        <td>ID</td>
        <td>User</td>
    </tr>
</table>

Column

<table>
    <colgroup>
        <col class="hero-column" />
        <col class="data-column" />
    </colgroup>
    <tr>
        <td>Product</td>
        <td>Active</td>
    </tr>
</table>

Table Body

<table>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>Developer</td>
        </tr>
    </tbody>
</table>

Table Row

<table>
    <tr>
        <td>Row Data 1</td>
        <td>Row Data 2</td>
    </tr>
</table>

Table Header Cell

<tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
</tr>

Table Data Cell

<tr>
    <td>Data Value 1</td>
    <td>Data Value 2</td>
</tr>

Table Footer

<table>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$150</td>
        </tr>
    </tfoot>
</table>

HTML Table Complete Core Snippet

<table>
    <caption>Enterprise Financial Metrics</caption>
    
    <colgroup>
        <col class="col-id" />
        <col span="2" class="col-metrics" />
    </colgroup>

    <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Quarter</th>
            <th scope="col">Revenue</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>#01</td>
            <td>Q1 2026</td>
            <td>$45,000</td>
        </tr>
        <tr>
            <td>#02</td>
            <td>Q2 2026</td>
            <td>$52,000</td>
        </tr>
    </tbody>

    <>
        <tr>
            <td colspan="2">Gross Total</td>
            <td>$97,000</td>
        </tr>
    </tfoot>
</table>

Beginner Tips

  1. Always use the scope="col" or scope="row" attribute on headers so screen readers can interpret layouts.
  2. Utilize colgroup to write CSS targeting entire data columns globally instead of styling individual column cells.
  3. Apply a structural tfoot component to handle summaries cleanly so multi-page prints repeat totals gracefully.
  4. Inject data-* attributes into cell markups to make modern responsive layouts stack effortlessly via pure CSS.
  5. Ensure your caption tags directly follow parent wrappers to instantly bridge accessibility gaps.
  6. Combine horizontal cell distributions safely using standard structural parameters like colspan for complex rows.
Download HTML CheatSheet