HTML HTML Tables and Mobile Overflow: Preserving Relationships

On mobile, keep the table's row-and-column meaning intact even when it needs horizontal scrolling. A small screen is not a reason to remove all headings. Before writing the code, picture the information as a small grid. Each label should help a reader understand the value next to it.

What You Need to Know

Combine a readable caption with responsive CSS. If the visual design reorders data, test whether the reading order still makes sense.

Example: See It in Action

This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<div class="table-container" role="region" aria-label="Price comparison" tabindex="0">
    <table>
        <caption>School supply costs</caption>
        <tr>
            <th scope="col">Item</th>
            <th scope="col">Store A</th>
            <th scope="col">Store B</th>
        </tr>
        <tr>
            <th scope="row">Pencil</th>
            <td>$1</td>
            <td>$2</td>
        </tr>
    </table>
</div>

Let’s Understand the Example

• Table represents information whose row and column relationships matter.
• Caption gives the whole data table a clear name.
• Class is a reusable label for styling or scripts; several elements may share the same class.
• Role describes an accessibility role when native HTML semantics do not already provide it.
• Aria-label supplies an accessible name when a visible label is unavailable or inadequate.
• Scope explains which table row, column or group a th cell labels.

Look at a data cell and ask: “What row and column does this value belong to?” The header elements help answer that question, including for people who navigate the table with a screen reader.

What Should You See?

You should see a grid for “School supply costs”, with headers such as “Item”, “Store A”, “Store B”. The browser displays cells, but meaningful table markup also helps readers connect each cell to its labels.

Read the first data row aloud together with its column labels. If you cannot explain a value without pointing to its position on screen, strengthen the headers.

Try It Yourself

1. Shrink the browser window and check that every value still has a recognizable header.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Using display tricks that separate values from their labels.
• Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.

Key Takeaways

• On mobile, keep the table's row-and-column meaning intact even when it needs horizontal scrolling.
• Table represents information whose row and column relationships matter.
• Combine a readable caption with responsive CSS. If the visual design reorders data, test whether the reading order still makes sense.