References

Beginner-friendly references for web development, with live, editable examples.

The HTML <tr> tag

Element All modern browsers Updated
Quick answer

The HTML <tr> element defines a table row. It contains the row's cells — <td> (data) and <th> (header) — and sits inside a <thead>, <tbody> or <tfoot>.

Overview

The <tr> (table row) element holds one horizontal row of cells. Its children are header cells (<th>) and data cells (<td>) — nothing else goes directly inside a row.

Rows belong to a table section: <thead>, <tbody> or <tfoot>. Even if you do not write a <tbody>, the browser inserts one implicitly, so every row ends up inside a section.

Style rows with CSS — zebra striping with :nth-child, a hover highlight, borders. The old per-row alignment attributes are obsolete, so reach for the stylesheet instead.

Syntax

<tr><th scope="row">Name</th><td>Ada</td></tr>

Example

Live example 
<table border="1">
  <tr><th>City</th><th>Country</th></tr>
  <tr><td>Paris</td><td>France</td></tr>
</table>

Best practices

  • Put only <th> and <td> cells directly inside a <tr>.
  • Place rows in a section — <thead>, <tbody> or <tfoot>.
  • Stripe and highlight rows with CSS (:nth-child, :hover) rather than per-row attributes.
  • Keep each row's cell count consistent (allowing for colspan/rowspan).

Frequently asked questions

What is the tr element?
A table row that contains a horizontal set of header (<th>) and data (<td>) cells.
What can go inside a tr?
Only <th> and <td> cells.
How do I stripe alternate table rows?
Use the CSS tr:nth-child(even) selector to give alternate rows a background color.
Do table rows need a tbody?
You do not have to write one — the browser adds an implicit <tbody> — but writing it makes the structure explicit and stylable.
title (element) track