HTML Table Practice: Make a Comparison Grid Accessible

An accessible comparison grid needs meaningful product labels, feature headers, and consistent units. If columns contain comparisons, readers must be able to tell which product each value belongs to. Use this as a chance to build something rather than just read about it. There is no need to remember every tag immediately.

What You Need to Know

Use a descriptive caption and check cell-header relationships. Simplify multi-level columns when they make the table harder to use.

Try solving the task before checking the example. It is fine to make mistakes: each browser refresh gives you another chance to see what the markup actually does.

Example: See It in Action

Here is a simple example to experiment with. Type it, save the file, and check what the browser displays.

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

<table>
    <caption>Laptop comparison</caption>
    <tr>
        <th scope="col">Feature</th>
        <th scope="col">Laptop A</th>
        <th scope="col">Laptop B</th>
    </tr>
    <tr>
        <th scope="row">Weight</th>
        <td>1.2 kg</td>
        <td>1.4 kg</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.
• Tr creates one row of table cells.
• 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?

The page should include “Laptop comparison”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.

Try to explain the example to someone else in two sentences. If one line is mysterious, inspect that line instead of copying it blindly.

Try It Yourself

1. Add a Price feature row and then read one cell with its row and column 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

• Using a blank corner header without context in an otherwise complicated grid.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• An accessible comparison grid needs meaningful product labels, feature headers, and consistent units.
• Table represents information whose row and column relationships matter.
• Use a descriptive caption and check cell-header relationships. Simplify multi-level columns when they make the table harder to use.