totn HTML

HTML: <tr> tag

This HTML tutorial explains how to use the HTML element called the <tr> tag with syntax and examples.

Description

The HTML <tr> tag defines a row in an HTML table. Each <tr> tag can contain one or more <th> tags that define header cells in the table or one or more <td> tags that define standard cells in the table. This tag is also commonly referred to as the <tr> element.

Syntax

In HTML, the syntax for the <tr> tag is: (example of a table with 2 columns and 4 rows)

<body>
<table>
  <tr>
    <th>Item</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td>Grapes</td>
    <td>$18</td>
  </tr>
  <tr>
    <td>Apples</td>
    <td>$4</td>
  </tr>
  <tr>
    <td>Pears</td>
    <td>$7</td>
  </tr>
</table>
</body>

Sample Output


Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <tr> tag:

Attribute Description HTML Compatibility
align Horizontal alignment of text in each cell within the row. It can be one of the following values: left, center, right, justify, char Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
bgcolor Background color of each cell within a row Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
char Set the character to align the cells in a column Deprecated in HTML 4.01, Obsolete in HTML5
charoff Number of characters to offset column data from the alignment characters (in char attribute) Deprecated in HTML 4.01, Obsolete in HTML5
valign Vertical alignment of text of each cell within a row. It can be one of the following values: baseline, bottom, middle, top Deprecated in HTML 4.01, Obsolete in HTML5, use CSS

Note

  • The HTML <tr> element is found in an HTML table within the <body> tag.
  • The <tr> tag is made up of one or more <th> or <td> tags.
  • The <tr> tag defines the table rows. There must be at least one row in the table.
  • The <th> tag defines the header cells in the table which are displayed as bold, center-aligned text.
  • The <td> tag defines the standard cells in the table which are displayed as normal-weight, left-aligned text.

Browser Compatibility

The <tr> tag is compatible with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <tr> tag below, exploring examples of how to use the <tr> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.