HTML HTML table Headers Attribute: Multiple Cell IDs

Headers on td or th can list several header IDs separated by spaces. This tells assistive tools which labels apply to a particular cell in a complex grid. 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

Every referenced ID must belong to the correct header element, and the order should be logical. Use scope alone for simple tables when it is sufficient.

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

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>
    <tr>
        <th id="name">Name</th>
        <th id="math">Math</th>
        <th id="science">Science</th>
    </tr>
    <tr>
        <th id="maya">Maya</th>
        <td headers="maya math">91</td>
        <td headers="maya science">93</td>
    </tr>
</table>

Let’s Understand the Example

• Table represents information whose row and column relationships matter.
• Th is a header cell. Its text explains what nearby data cells mean.
• Headers lists header-cell ids that apply to a complex table data cell.
• Id gives one element a unique name within the page, so a link, label, or script can point to it.

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 the data table, with headers such as “Name”, “Math”, “Science”. 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. Check each headers value against existing th IDs.
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

• Separating header IDs with commas instead of spaces.
• Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.

Key Takeaways

• Headers on td or th can list several header IDs separated by spaces.
• Table represents information whose row and column relationships matter.
• Every referenced ID must belong to the correct header element, and the order should be logical. Use scope alone for simple tables when it is sufficient.