HTML <tr> Tag for Table Rows

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <tr> Tag in HTML 5

The <tr> tag is used to create a row in an HTML table. A series of th table heading cell elements and td table data cell elements are used to divide each table row into cells.

In the following example, there are two rows in the table header, two more rows in the table body and one row in the table footer, for a total of five tr elements in all.

Table Caption
	Multiple Column Heading
	First Column Heading	Second Column Heading
This is an example of an HTML table footer.
Row 1	Row 1 Column 1	Row 1 Column 2
Row 2	Row 2 Column 1	Row 2 Column 2

This is an actual working demo of the table row example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)

See the tutorial on Creating HTML Tables for full details on how to create an HTML table using the HTML table tags together.

<tr> Tag Syntax

<body>
   ... flow content expected ...
   <table>
      ...
      <tr>
         <td>...</td>
         ...
      </tr>
      ...
   </table>
</body>

Rules for coding the HTML `tr` element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Include a tr element inside a thead element, a tfoot element or an explicit or implied tbody element.
Begin the tr element with a starting <tr> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Inside the tr element, between the starting <tr> tag and the ending </tr> tag, code the inner HTML for the cells of the table row.
End the tr element with a matching </tr> closing tag.

tr Content Model

Child Elements of the <tr> tag

A table row can include the following elements:

<th> tag(s): table column headings, which is normally coded in rows under a <thead> tag
<td> tag(s): table detail cells, which can be coded in rows under a <tbody> tag or a <tfoot> tag

<tr> Tag Attributes

Attributes of the <tr> tag

global attributes

In addition to the personal attributes of the <tr> tag below, any of the common HTML attributes can also be coded.

<tr> Tag Examples

Examples of the `tr` tag in HTML 5

Here is the HTML code for the table demo above:

<table>
   <caption>Table Caption</caption>
   <colgroup>
      <col style="width: 20%"/>
      <col style="width: 80%"/>
   </colgroup>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2">Multiple Column Heading</th>
      </tr>
      <tr style="vertical-align: bottom">
         <th>First Column Heading</th>
         <th>Second Column Heading</th>
      </tr>
   </thead>
   <tfoot>
      <tr><td colspan="2">This is an example of an HTML table footer.</td></tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
      <tr>
         <td>Row 2 Column 1</td>
         <td>Row 2 Column 2</td>
      </tr>
   </tbody>
</table>

In HTML 5, you can turn a whole row of an HTML table into a link:

<table>
   <tr><td>Label:</td><td>Data...</td></tr>
   ...
   <tr onclick="location=this.getElementsByTagName('a')[0]">
      <a href="new-row.html"/>
      <td colspan="2">Add a Row</td>
   </tr>
</table>

Changes in HTML 5 - <tr> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The following attributes should not be coded on the <tr> tag because they either have been deprecated or were never officially supported:

bgcolor

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the tr element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5