HTML <table> Element: Creating a Data Table

Tables organize information that needs rows and columns. The table element groups the data; tr creates rows, and th or td creates cells. Think about what the picture adds to the story, not just whether it looks nice on the screen.

What You Need to Know

Use tables for data comparison, not general page layout. A caption and clear header cells make the relationships much easier to follow.

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.

<table>
    <caption>After-school activities</caption>
    <thead>
        <tr>
            <th scope="col">Day</th>
            <th scope="col">Activity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Monday</th>
            <td>Robotics</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.
• 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?

If the image file is available, the picture appears in the page. If not, the browser may show a broken image or fallback text. Check that the text alternative fits the picture’s purpose.

Cover the picture and read the surrounding text aloud. If essential information has disappeared, add a useful text alternative or nearby explanation.

Try It Yourself

1. Add a second activity row and read each cell with its column 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 a table to position a site menu beside an article.
• Never guess at an image description. Write alternative text that matches the picture and its purpose on this page.

Key Takeaways

• Tables organize information that needs rows and columns.
• Table represents information whose row and column relationships matter.
• Use tables for data comparison, not general page layout. A caption and clear header cells make the relationships much easier to follow.