HTML Exercise: Build a Product Comparison Table

A comparison table works well when products share the same features. Put those features in row headers so readers can scan prices, sizes, and differences. 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 consistent units and describe unavailable information in words. If the table becomes very complex, consider simplifying the comparison rather than adding more merged cells.

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>Three school backpacks</caption>
    <thead>
        <tr>
            <th scope="col">Feature</th>
            <th scope="col">Bag A</th>
            <th scope="col">Bag B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Weight</th>
            <td>400 g</td>
            <td>650 g</td>
        </tr>
    </tbody>
</table>

Let’s Understand the Example

• Table represents information whose row and column relationships matter.
• Caption gives the whole data table a clear name.
• Thead groups the rows used as the table header.
• 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 “Three school backpacks”. 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 row and label each value with its unit.
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

• Leaving empty cells where users cannot tell whether a feature is missing or unknown.
• A page may appear fine while containing mistakes. Inspect the source and use a validator to check what you wrote.

Key Takeaways

• A comparison table works well when products share the same features.
• Table represents information whose row and column relationships matter.
• Use consistent units and describe unavailable information in words. If the table becomes very complex, consider simplifying the comparison rather than adding more merged cells.