Table Row (tr)

Master the <tr> element to structure HTML tables correctly, ensuring data alignment and accessibility by maintaining consistent cell counts across rows.

What it is

The <tr> (Table Row) element defines a row of cells in an HTML table. It acts as a container for <td> (data cells) or <th> (header cells). Think of a table as a grid: the <table> is the frame, <tr> represents each horizontal line, and the cells within represent the intersections. Related terms include <thead>, <tbody>, and <tfoot>, which group multiple <tr> elements for semantic clarity.

Why it matters

• Data Integrity: Consistent row structures prevent visual misalignment and broken layouts.
• Accessibility: Screen readers rely on proper row and cell associations to navigate tabular data logically.
• Semantic Meaning: Using <tr> explicitly declares content as tabular data rather than just positioned text.
• Styling Control: CSS selectors can target entire rows easily using tr:hover or specific classes.

Syntax or steps

A basic table row requires opening and closing tags containing at least one cell. The smallest useful pattern inside a table looks like this:

<tr>
  <td>Content</td>
</tr>

For header rows, replace <td> with <th>. Always ensure every row has the same number of cells unless you intentionally use colspan.

Example

Here is a minimal, valid HTML table displaying user data. Note how each <tr> contains exactly three cells.

<table border="1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Admin</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>User</td>
      <td>Inactive</td>
    </tr>
  </tbody>
</table>

Part-by-part explanation:
1. <thead> groups the header row for semantic separation.
2. The first <tr> uses <th> tags to define column labels.
3. <tbody> wraps the actual data rows.
4. Each subsequent <tr> holds three <td> elements, matching the header count.

Common mistakes

• Inconsistent Cell Counts: Adding a fourth cell to one row but not others breaks the grid. Fix: Ensure every row has the same number of <td>/<th> elements.
• Nesting Tables Incorrectly: Placing a <table> directly inside a <tr> without wrapping it in a <td> is invalid. Fix: Always nest tables inside cells.
• Missing Closing Tags: While browsers are forgiving, omitting </tr> can cause unexpected rendering in strict parsers. Fix: Always close your tags.
• Using Divs Instead: Attempting to mimic tables with <div> elements loses accessibility benefits. Fix: Use native <table> elements for tabular data.

When to use it

Use <tr> whenever you display structured, two-dimensional data. Compare it with CSS Grid or Flexbox for layout purposes.

Practice

Guided Exercise: Create a table with two columns ("Product", "Price") and three rows of data. Ensure the header row uses <th> and data rows use <td>.

Challenge: Add a third column called "Category" to your existing table. Update all rows to maintain consistency. Hint: You must add a new <th> in the header and a new <td> in every data row.

Quick check

Question: What happens if one <tr> has four cells while another has three?

Answer: The table layout will break visually, causing misalignment, and screen readers may interpret the data incorrectly due to missing context.

Summary

The <tr> element is the fundamental building block of HTML tables, organizing data into horizontal lines. By keeping cell counts consistent and using semantic tags like <th> and <td>, you ensure that your data remains readable, accessible, and structurally sound.