HTML <tr> Element: Table Rows

Every tr starts a new table row and contains table cells. Rows should be organized into a logical grid. Think about what the picture adds to the story, not just whether it looks nice on the screen.

What You Need to Know

The browser may create a tbody when your markup omits one; that does not change the purpose of tr. Check how many columns each row is meant to have.

Pictures can make a page much easier to understand, but they are useful only when the file loads and the important meaning is also available as text.

Example: See It in Action

Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.

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

<table>
    <tbody>
        <tr>
            <th>Student</th>
            <th>Score</th>
        </tr>
        <tr>
            <td>Alex</td>
            <td>92</td>
        </tr>
        <tr>
            <td>Maya</td>
            <td>88</td>
        </tr>
    </tbody>
</table>

Let’s Understand the Example

• Tr creates one row of table cells.
• Table represents information whose row and column relationships matter.
• Tbody groups the main data rows in a table.

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 third student row with the correct number of cells.
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

• Forgetting to close a tr and then wondering why cells appear in unexpected places.
• Never guess at an image description. Write alternative text that matches the picture and its purpose on this page.

Key Takeaways

• Every tr starts a new table row and contains table cells.
• Tr creates one row of table cells.
• The browser may create a tbody when your markup omits one; that does not change the purpose of tr. Check how many columns each row is meant to have.