HTML <tr> Tag

The <tr> tag creates a table row in an HTML table. Each row is a container for one or more table cells. A table can have any number of rows.

HTML Tag

Example

#

A table with 4 <tr> tags: 1 header row (lightblue) and 3 data rows.

First Name Last Name
Denice Hobermann
Timothy O'Neill
Jane Hollander
<style>
 table.tb { width:300px; border-collapse: collapse; }
 .tb th, .tb td { padding:3px; border: 1px solid #777; }
 .tb th { background-color:lightblue; }
</style>

<table class="tb">
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
  </tr>
  <tr>
    <td>Denice</td>
    <td>Hobermann</td>
  </tr>
  <tr>
    <td>Timothy</td>
    <td>O'Neill</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Hollander</td>
  </tr>
</table>
tr = table row
th = table heading
td = table data cell

Using <tr>

The <tr> tag creates a single table row.

This tag must be placed inside a <table> tag. A table can have any number of <tr> rows.

In turn, a <tr> contains one or more <th> or <td> elements.

Note: By default, tables have no borders. Our examples use CSS for basic styling.

More Examples

A table with 8 <tr> elements -- 1 header row and 7 data rows.

First name Last name Email City Country
Jelle van Loenen jelle@loenen.org Amsterdam Netherlands
Tim Hallman thall@aa.com Dallas USA
Jose Lopez lopez@argtech.ph Manila Philippines
Jeroen Harmsma jharm@gmail.com The Hague Netherlands
Sunil Gupta sunil@traf.in Mumbai India
Henry Wong henry@google.com San Francisco USA
Cindy Velasquez cindy@alicante.mx Mexico City Mexico
<style>
 table.tbl { width:100%; border-collapse: collapse; }
 .tbl th, .tbl td { padding:3px; border: 1px solid #aaaa; }
 .tbl th { background-color:lightblue; }
</style>

<table class="tbl">
  <tr>
    <th>First name</th>
    <th>Last name</th>
    <th>Email</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Jelle</td>
    <td>van Loenen</td>
    <td>jelle@loenen.org</td>
    <td>Amsterdam</td>
    <td>Netherlands</td>
  </tr>
  <tr>
    <td>Tim</td>
    <td>Hallman</td>
    <td>thall@aa.com</td>
    <td>Dallas</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Jose</td>
    <td>Lopez</td>
    <td>lopez@argtech.ph</td>
    <td>Manila</td>
    <td>Philippines</td>
  </tr>
  <tr>
    <td>Jeroen</td>
    <td>Harmsma</td>
    <td>jharm@gmail.com</td>
    <td>The Hague</td>
    <td>Netherlands</td>
  </tr>
  <tr>
    <td>Sunil</td>
    <td>Gupta</td>
    <td>sunil@traf.in</td>
    <td>Mumbai</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Henry</td>
    <td>Wong</td>
    <td>henry@google.com</td>
    <td>San Francisco</td>
    <td>USA</td>
  </tr>
  <tr>
    <td>Cindy</td>
    <td>Velasquez</td>
    <td>cindy@alicante.mx</td>
    <td>Mexico City</td>
    <td>Mexico</td>
  </tr>
</table>

Attributes for <tr>

The <tr> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    identifier Defines a unique identifier for the row.
class    classnames Sets one or more CSS classes to be applied to the row.
style    CSS-styles Sets the row style. Some styles, such as padding, has no effect.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the row is hidden.
title    text Sets a title that displays as a tooltip.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attributes listed below.  They are no longer valid on tr in HTML5.

Attribute Description Alternative
align Aligns the content in the row. CSS text-align
bgcolor Defines the background color for the row. CSS background-color
char Aligns content to a character, for example "," or ".". CSS text-align
charoff Shifts column data to the right relative to char attribute. CSS text-align
valign Sets the vertical alignment of content in the row. CSS vertical-align

Table Tags

The <tr> tag is part of a group of tags that are used to create HTML tables. This group is referred to as the Table tag group. Together, these tags allow you to create comprehensive HTML tables.

Here is a list of table tags

Element Description
<table> Creates a table that contains elements listed below
<caption> Creates a caption above or under a table
<colgroup> Creates a container for col elements
<col> Creates a style for one or more columns in a table
<thead> Creates a table header that can style all header cells
<tbody> Creates a table body that can style all data cells
<tfoot> Creates table footer that can style all footer cells
<tr> Creates a table row that contains table cells
<th> Creates a table header cell
<td> Creates a table data cell

Browser support

Here is when <tr> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides