Table Row (tr)

The <tr> element defines a single row of a table. Every table is built from one or more rows, each containing its own set of cells.

Syntax

<tr>
    <td>cell 1</td>
    <td>cell 2</td>
</tr>

Basic Example

<table>
    <tr>
        <th>Name</th>
        <th>Score</th>
    </tr>
    <tr>
        <td>Aman</td>
        <td>92</td>
    </tr>
</table>

Browser output: two horizontal rows — one for headers, one for the data — each cell aligned into its own column.

How It Works

Each <tr> can contain any mix of <td> and <th> cells. The number of cells in a row determines how many columns that row visually occupies — a table's column count is really just "however many cells its rows contain," not something declared separately.

Important Attributes

Real-World Example

<tbody>
    <tr><td>HTML Basics</td><td>Beginner</td><td>4 hrs</td></tr>
    <tr><td>Semantic HTML</td><td>Intermediate</td><td>2.5 hrs</td></tr>
</tbody>

Each course module gets its own row — the natural way a table represents one record per row.

Common Mistakes

• Rows with inconsistent numbers of cells, producing a visually ragged, misaligned table
• Mixing <th> and <td> inconsistently within data rows where every cell should really be a <td>

Best Practices

• Keep every row's cell count consistent, using colspan deliberately (not accidentally) where a cell needs to span more than one column
• Group header rows in <thead> and data rows in <tbody>

Accessibility Considerations

Consistent row structure lets screen readers correctly announce which column each cell belongs to as a user navigates through the table.

SEO Considerations

No direct effect beyond the general benefits of clean, well-structured table markup.

Browser & Modern HTML Notes

Stable and unchanged; old presentational attributes on <tr> like bgcolor and align are obsolete in favor of CSS.

Mini Practice

1. Build a 3-row table where every row has exactly 3 cells.
2. Spot and fix a table where one row is missing a cell compared to the others.

Related HTML Notes

• table-tag
• table-cell
• table-header