HTML Tables: Structuring Tabular Data

When to Use Tables

HTML tables should be used for displaying tabular data—information that naturally fits in rows and columns. Never use tables for page layout.

Good uses for tables:

• Financial data and spreadsheets
• Comparison charts
• Schedules and timetables
• Statistics and research data

Basic Table Structure

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
            <td>Data 3</td>
        </tr>
    </tbody>
</table>

Table Elements Explained

• <table>: Container for the entire table
• <thead>: Groups header rows
• <tbody>: Groups body content rows
• <tfoot>: Groups footer rows
• <tr>: Table row
• <th>: Table header cell
• <td>: Table data cell

Adding a Caption

<table>
    <caption>Monthly Sales Report 2026</caption>
    <!-- table content -->
</table>

Spanning Rows and Columns

<td colspan="2">Spans 2 columns</td>
<td rowspan="3">Spans 3 rows</td>

Accessible Tables

For complex tables, use scope attributes:

<table>
    <thead>
        <tr>
            <th scope="col">Product</th>
            <th scope="col">Q1</th>
            <th scope="col">Q2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Widget A</th>
            <td>$500</td>
            <td>$750</td>
        </tr>
    </tbody>
</table>

Complete Example

<table>
    <caption>2026 Quarterly Revenue</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>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">North</th>
            <td>$10,000</td>
            <td>$12,000</td>
            <td>$15,000</td>
            <td>$18,000</td>
        </tr>
        <tr>
            <th scope="row">South</th>
            <td>$8,000</td>
            <td>$9,500</td>
            <td>$11,000</td>
            <td>$13,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>$18,000</td>
            <td>$21,500</td>
            <td>$26,000</td>
            <td>$31,000</td>
        </tr>
    </tfoot>
</table>

Best Practices

1. Use <caption> to describe the table's purpose
2. Always include <thead> and <tbody>
3. Use scope attributes on header cells
4. Keep tables simple—avoid excessive nesting
5. Make tables responsive for mobile devices

Use our Table Generator to quickly create HTML tables.