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.
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 rowth = table headingtd = table data cellThe <tr> tag creates a single table row.
This tag must be placed inside a <table> tag.
Note: By default, tables have no borders. Our examples use CSS for basic styling.
A table with 8 <tr> elements -- 1 header row and 7 data rows.
| First name | Last name | 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>
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.
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 |
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, they 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 |
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 |
