HTML <th> vs <td>: Header and Data Cells

Th identifies a header, while td holds an ordinary data value. Good header markup lets readers understand what each number or word means. 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

Use scope for simple row and column headers. Bold-looking text inside td is still data, not a real header relationship.

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

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>
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
    </tr>
    <tr>
        <th scope="row">Notebook</th>
        <td>$4</td>
    </tr>
    <tr>
        <th scope="row">Pen</th>
        <td>$2</td>
    </tr>
</table>

Let’s Understand the Example

• Th is a header cell. Its text explains what nearby data cells mean.
• Td is an ordinary data cell in a table.
• 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 the data table, with headers such as “Product”, “Price”, “Notebook”. 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. Change the first cell of each product row into a row 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

• Making headers with strong text inside td instead of using th.
• Do not replace actual header cells with bold ordinary cells. Header markup is part of the meaning, not just the appearance.

Key Takeaways

• Th identifies a header, while td holds an ordinary data value.
• Th is a header cell. Its text explains what nearby data cells mean.
• Use scope for simple row and column headers. Bold-looking text inside td is still data, not a real header relationship.