HTML Pagination of Large Tables and Header Context

Large datasets may be split across several pages. A separate pagination nav lets readers move between slices, but every page should preserve the table's context and headers. 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

Say which page the reader is viewing. Server-side pagination or JavaScript needs to supply the new rows; HTML links only navigate to their destinations.

Read a table like a story about data. The caption says what you are looking at; row and column headers explain what the numbers or words mean.

Example: See It in Action

Try this markup in a fresh practice file. The next section explains the parts worth paying attention to.

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

<nav aria-label="Score pages"><a href="scores-1.html">1</a><a href="scores-2.html" aria-current="page">2</a>
</nav>
<table>
    <caption>Scores, page 2</caption>
    <tr>
        <th scope="col">Student</th>
        <th scope="col">Score</th>
    </tr>
    <tr>
        <th scope="row">Maya</th>
        <td>88</td>
    </tr>
</table>

Let’s Understand the Example

• Table represents information whose row and column relationships matter.
• Caption gives the whole data table a clear name.
• Aria-label supplies an accessible name when a visible label is unavailable or inadequate.
• Href contains the destination of a link. A value starting with # points to an id on the same page.
• Aria-current identifies the current item in a set, such as the current page in navigation.
• 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 “Scores, page 2”, with headers such as “Student”, “Score”, “Maya”. 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. Build a third page with the same table caption and headers.
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

• Removing column headers on later pages because they already appeared on page one.
• Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.

Key Takeaways

• Large datasets may be split across several pages.
• Table represents information whose row and column relationships matter.
• Say which page the reader is viewing. Server-side pagination or JavaScript needs to supply the new rows; HTML links only navigate to their destinations.