0%

<tr> Table row

A single table row of cells.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<tr> is one table row. It holds <th> and <td> cells and nothing else. Put text straight into a tr and the browser moves it out of the table.

Every row should add up to the same number of columns, colspan included. Old attributes like bgcolor do not belong on rows. Style them with CSS, for example tr:nth-child(even) for zebra stripes.

Where rows may appear is listed in the tr element definition (opens in a new tab). To merge cells across rows, work through the Spanning Cells lesson.

Syntax

<tr>
  <th scope="row">Header</th>
  <td>Data</td>
</tr>

When to use it

Data that lines up in two directions needs <tr>: one record per row, one property per column. A contact in an address book, a train in a timetable and a player on a scoreboard each get a row. Items that share no columns are not rows at all. Give them a list or a set of cards.

One row, one thing. If the row opens with that thing's name, make the first cell a <th scope="row">. Screen readers then tell users which record they are in as they move from column to column.

Sooner or later someone asks for the whole row to be a link to the order's detail page. Wrapping a tr in an <a> fails, because the parser moves the link out of the table. Put a real link in one cell, such as the order number. Need a bigger target? Enlarge that link with CSS and leave click handlers off the row. The table element page shows the overall structure.

Live example

Edit the code and watch the preview.

<table>
  <tr>
    <th scope="col">Planet</th>
    <th scope="col">Moons</th>
  </tr>
  <tr>
    <td>Earth</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Mars</td>
    <td>2</td>
  </tr>
</table>

More examples

Order list with a link per row

One order per row. The whole row is not clickable; the order number in the first cell is an ordinary link. That means it works from the keyboard, opens in a new tab on request and gets announced as a link by screen readers.

<table>
  <caption>Your orders</caption>
  <tr>
    <th scope="col">Order</th>
    <th scope="col">Date</th>
    <th scope="col">Status</th>
  </tr>
  <tr>
    <th scope="row"><a href="/orders/1042">#1042</a></th>
    <td>2 March</td>
    <td>Delivered</td>
  </tr>
  <tr>
    <th scope="row"><a href="/orders/1057">#1057</a></th>
    <td>9 March</td>
    <td>On its way</td>
  </tr>
</table>

Marking the visitor's own row

On this scoreboard a class picks out the visitor's own row. The row also says (you) in plain text, for anyone who cannot see the highlight color.

<style>
.you{background:#e6f4ea;font-weight:bold}
</style>
<table>
  <tr><th scope="col">Rank</th><th scope="col">Player</th><th scope="col">Points</th></tr>
  <tr><td>1</td><td>Mia</td><td>980</td></tr>
  <tr class="you"><td>2</td><td>Leo (you)</td><td>910</td></tr>
  <tr><td>3</td><td>Sam</td><td>875</td></tr>
</table>

Tip: A tr holds th and td cells, nothing else.

Browser support

Every browser supports tr, and it is in the HTML Living Standard. Browsers still render old presentational attributes like bgcolor, align and valign so that old pages keep working. They are obsolete, though, and the validator will flag them. Use CSS on the row or its cells.

Accessibility

Give every row the same number of cells, counting colspan, or screen readers will report the wrong column positions. How rows and headers relate is shown in the W3C tables tutorial (opens in a new tab).

Common mistakes

Wrong

<tr>Ana, 31</tr>

Right

<tr><td>Ana</td><td>31</td></tr>

Bare text in a tr gets moved out of the table. It has to sit in a td or th.

Frequently asked questions

How do I add stripes to table rows?

With the CSS :nth-child selector: tbody tr:nth-child(even){background:#f4f4f4}. The bgcolor attribute on <tr> is obsolete. Pick subtle stripe colors and check that text passes contrast requirements on both. On a wide table, stripes help the eye follow one row across many columns.

Can I put a div inside a tr?

No. A <tr> accepts only <td> and <th> cells, plus script-supporting elements. Anything else gets moved out of the table by the parser, and the layout breaks. If a cell needs extra structure, put the div inside a td.

Practise it

Related tables elements

<table>Tabular data laid out in rows and columns.<caption>A table's title, written as the table's first child.<colgroup>Groups table columns so you can style them as one.<col>Stands for one or more columns in a colgroup, for styling.<thead>Wraps the header row or rows of a table.<tbody>Wraps the main rows of data in a table.<tfoot>Holds summary rows such as totals at the foot of a table.<th>Header cell for a column or row, shown bold and centered by default.<td>A normal data cell inside a table row.