Path // www.yourhtmlsource.com → Reference → <TR> ELEMENT

<tr> element

by Ross Shannon

The <tr> element defines a row in a table. It acts as a container for table cells, which can be either header cells (<th>) or data cells (<td>). Every table must have at least one row, and each row typically contains the same number of cells to maintain the table’s grid structure.

Clock This page was last updated on 2025-11-17


Syntax

Table rows contain cells and are placed inside table section elements:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Key Attributes

The tr element has no specific attributes in modern HTML. The following obsolete attributes should be replaced with CSS:

  • align (obsolete) — Use CSS text-align instead
  • valign (obsolete) — Use CSS vertical-align instead
  • bgcolor (obsolete) — Use CSS background-color instead
  • char (obsolete) — Character for alignment
  • charoff (obsolete) — Offset for character alignment

Modern styling examples:

tr {
  border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #e8e8e8;
}

Examples

Basic Table Rows

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>28</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>35</td>
    <td>Chicago</td>
  </tr>
</table>

Rows with Mixed Cell Types

<table>
  <tr>
    <th scope="col">Product</th>
    <th scope="col">Price</th>
    <th scope="col">Stock</th>
  </tr>
  <tr>
    <th scope="row">Widget A</th>
    <td>$25.00</td>
    <td>150</td>
  </tr>
  <tr>
    <th scope="row">Widget B</th>
    <td>$30.00</td>
    <td>85</td>
  </tr>
</table>

Styling Alternate Rows

<style>
  .striped-table tr:nth-child(odd) {
    background-color: #ffffff;
  }
  .striped-table tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  .striped-table tr:hover {
    background-color: #e0e0e0;
  }
</style>

<table class="striped-table">
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Apples</td><td>25</td></tr>
    <tr><td>Oranges</td><td>18</td></tr>
    <tr><td>Bananas</td><td>32</td></tr>
    <tr><td>Grapes</td><td>12</td></tr>
  </tbody>
</table>

When to Use

Row structure rules:

  • Every table cell must be inside a table row
  • Rows should have a consistent number of cells (accounting for colspan)
  • Rows can contain either <th> or <td> cells, or a mix of both
  • Rows can be placed directly in <table> or inside <thead>, <tbody>, or <tfoot>

Best practices:

  • Use CSS for styling rows instead of obsolete HTML attributes
  • Apply zebra striping (alternating colors) for better readability
  • Add hover effects to help users track across wide tables
  • Keep content within rows semantically related
  • Use appropriate section elements (thead, tbody, tfoot) to group rows

Empty rows are valid but should be avoided as they don’t convey meaningful information. If you need visual spacing, use CSS margins or padding instead.

  • <table> — Table container
  • <thead> — Table header group (parent)
  • <tbody> — Table body group (parent)
  • <tfoot> — Table footer group (parent)
  • <th> — Table header cell (child)
  • <td> — Table data cell (child)