<tr> (Table Row)

Level 4 — Tables Defines a horizontal row of cells in a table.

1. Prerequisites

• <table> — The parent container for all rows.
• Nesting — Since table rows must nest directly inside a parent table container.

2. Term Category

Structural Tag (Universal Browser Support): <tr> (Table Row) is a fundamental concept in this technology stack. Level 4 — Tables

3. Explanation

(1) Design Motivation — "Why did we design this?"

A table needs a way to organize its grid. In HTML, tables are built horizontally, row by row (not column by column). The W3C designed the <tr> (Table Row) element to serve as the horizontal container. Every time you want to start a new line in your spreadsheet, you create a new <tr>. Inside that row, you will then place your individual data cells.

(2) Reality Metaphor

Imagine a bookshelf. The <table> is the entire wooden frame of the bookshelf. The <tr> is a single horizontal wooden shelf. You can't put a book directly onto the frame; you have to put it on a shelf. The more shelves (<tr> tags) you add, the taller the bookshelf gets.

(3) Code Examples

Short Snippet

<table>
  <!-- Row 1 -->
  <tr>
    <!-- Cells go here -->
  </tr>
  <!-- Row 2 -->
  <tr>
    <!-- Cells go here -->
  </tr>
</table>

4. Common Mistakes & Pitfalls

Mistake 1: Putting text directly inside a <tr>

The mistake: Writing text directly inside the <tr> tags without wrapping it in a data cell.

Why it's wrong: A row is just a structural container (like a shelf). It cannot hold raw data. The HTML specification requires that the only valid children of a <tr> are <th> (headers) or <td> (data cells). If you put raw text inside a <tr>, the browser will usually break the table layout and render the text outside the table entirely!

Incorrect:

<table>
  <tr>
    Employee Name: John Doe <!-- WRONG! Missing cell tags -->
  </tr>
</table>

Fix:

<table>
  <tr>
    <td>Employee Name: John Doe</td> <!-- CORRECT! Wrapped in a cell -->
  </tr>
</table>

Mistake 2: Placing Raw Text or Non-<th>/<td> Elements Directly Inside <tr> Rows

The mistake: Writing <tr>Direct text string</tr> or <tr><div>Box</div></tr>.

Why it's wrong: The ONLY permitted direct children of a <tr> element are <th> and <td> table cells. Raw text or <div> elements inside <tr> are invalid HTML.

Incorrect:

<tr>
  <div>Cell Content</div> <!-- ❌ Invalid direct child inside tr! -->
</tr>

Fix:

<tr>
  <td><div>Cell Content</div></td> <!-- Wrap inside td cell -->
</tr>

Mistake 3: Varying Cell Counts Across <tr> Rows Without Using colspan or rowspan

The mistake: Creating Row 1 with 3 cells, and Row 2 with 2 cells without colspan.

Why it's wrong: Row cell counts in a table must match across all rows. Mismatched cell counts create broken table grids with missing border cells.

Incorrect:

<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td></tr> <!-- ❌ Missing 3rd cell breaks grid column! -->

Fix:

<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td colspan="2">5</td></tr> <!-- Merge remaining column -->

5. Practice Exercises

Exercise 1: Structuring Data Rows inside Table Sections

Scenario: An author creates table rows (<tr>) containing appropriate header and data cells.

Requirements:

1. Create <tr> elements inside <thead>, <tbody>, and <tfoot>.
2. Ensure <tr> contains only <th> or <td> children.

<table>
  <caption>Employee Roster</caption>
  <thead>
    <tr> <!-- Header Row -->
      <th scope="col">ID</th>
      <th scope="col">Name</th>
    </tr>
  </thead>
  <tbody>
    <tr> <!-- Data Row 1 -->
      <th scope="row">#1</th>
      <td>Alice</td>
    </tr>
    <tr> <!-- Data Row 2 -->
      <th scope="row">#2</th>
      <td>Bob</td>
    </tr>
  </tbody>
</table>

Exercise 2: Alternating Row Colors for Visual Scannability

Scenario: Applies CSS zebra-striping to <tr> elements for improved scannability.

Requirements:

1. Style alternating <tr> rows using CSS :nth-child(even).

<tbody class="zebra-table">
  <tr>
    <th scope="row">Row 1</th>
    <td>Data A</td>
  </tr>
  <tr>
    <th scope="row">Row 2</th>
    <td>Data B</td>
  </tr>
</tbody>

Exercise 3: Interactive Table Rows with Keyboard Focus and ARIA Roles

Scenario: Adds interactive selection capabilities to table rows for dynamic web apps.

Requirements:

1. Add tabindex="0" and aria-selected to interactive <tr> elements.

<tbody role="rowgroup">
  <tr tabindex="0" aria-selected="true" class="selected-row">
    <th scope="row">Message #101</th>
    <td>Unread Email Subject</td>
  </tr>
</tbody>

6. Related Terms

• <table> — The parent that holds the <tr>.
• <td> (Table Data) — The data cells that go inside the <tr>.
• Block-level vs Inline Elements — The display behavior governing table rows.
• <th> (Table Header) — Related concept: <th> (Table Header).
• <thead>, <tbody>, <tfoot> — Related concept: <thead>, <tbody>, <tfoot>.

7. Key Takeaways

• <tr> stands for Table Row.
• It is used to slice a table horizontally.
• You cannot put text directly inside a <tr>; it must contain <td> or <th> cells.
• Tables in HTML are built row-by-row, not column-by-column.