❮ Previous Next ❯

HTML <tr> tag

The <tr> tag defines an HTML table row. It should contain one or more <th> or <td> element.

Display Type: Table-row

Related elements of <tr> tag:

  • <table>: It defines an HTML table.
  • <caption>: It defines an HTML table name.
  • <col>: It defines a column in an HTML table.
  • <colgroup>: It defines a group of columns within an HTML table.
  • <th>: It defines an HTML table heading.
  • <td>: It defines an HTML table cell.
  • <tbody>: It defines the group of main content of an HTML table.
  • <tfoot>: It defines the group of footer content of an HTML table.
  • <thead>: It defines the group of header content of an HTML table.

Example of <tr> tag

 <tr>
  <th> Name </th>
  <th> Age </th>
 </tr>
 <tr>
  <td> John </td>
  <td> 21 </td>
 </tr>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<tr> Yes Yes Yes Yes Yes

Full code example

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>

 <tr>
  <th> Name </th>
  <th> Age </th>
 </tr>

 <tr>
  <td> Tom </td>
  <td> 30 </td>
 </tr>
 
 <tr>
  <td> John </td>
  <td> 32 </td>
 </tr>
 
</table>
</body>
</html>
Run The code »

Output on the browser

Name Age
Tom 30
John 32

Attributes of <tr> tag

  1. align
  2. bgcolor
  3. char
  4. charoff
  5. valign

1. align attribute

The align attribute defines the horizontal alignment of the content in a table row. It is not supported in HTML5. For practical doing, make sure to define in HTML 4.01 Transitional Standard. Use CSS property - "text-align" to replace it.

Syntax

<tr align="left | center | right | justify | char">
Its default value is center.

Attribute values

Value Notes
left It defines left alignment content.
center It defines center alignment content.
(Default value)
right It defines right alignment content.
justify It defines equal lines in length.
char It defines content alignment to a specific character.

CSS replacement example

<tr style="text-align: left;">

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
align Yes Yes Yes Yes Yes

2. bgcolor attribute

The bgcolor attribute defines the background-color of a table row. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. Use CSS property instead - "background-color" to replace it.

Syntax

<tr bgcolor="color_name | hex_number | rgb_number">

Attribute values

Value Notes
color_name It defines the background-color with a color name like red, green etc.
hex_number It defines the background color with a hex code (like "#ff0700").
rgb_number It defines the background color with a rgb code (like "rgb(255,255,255)").

CSS replacement example

<tr style="background-color: grey;">
 or
<tr style="background-color: #808080;">
 or
<tr style="background-color: rgb(128, 128, 128);">

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
bgcolor Yes Yes Yes Yes Yes

3. char attribute

The char attribute defines the alignment of the content to a character in a row. This attribute is valid only when the align attribute is set to char value. It is not supported in HTML5. Use CSS property instead - "text-align" like <tr style = "text-align: right">

Syntax

<tr align="char" char="character">

Example (obsolete)

 <tr align="char" char=".">
  <td> 12. 5 </td>
  <td> 3.165 </td>
 </tr>

Numbers will align at the decimal point.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
char No No No No No

4. charoff attribute

The charoff attribute defines the horizontal distance (mostly prefer in the number of pixels) of the alignment character specified by the char attribute. This attribute is valid only when the align attribute. It is not supported in HTML5. Use CSS property instead - "text-align" like
<tr style = "text-align: right">

Basic syntax

<tr align="char" char="." charoff="12">
In the above syntax, align="char" enables alignment based on the character.
char="." defines the characters are aligned based on the decimal (.).
charoff="12" means the decimal (.) is positioned 12 pixel from the left edge of the column.

Attribute values

Attribute values can be either negative or positive.
Value Note
positive number It defines the numbers of pixels positioned from the left of the column.
negative number It defines the numbers of pixels positioned from the right of the column.

Example (obsolete)

<tr align="char" char="." charoff="12">
 <td> 2.5 </td>
 <td> 3.165 </td>
</tr>

The above example means that the two numbers are aligned based on the decimal (.) and the decimal is positioned 12 pixels from the left side of the column.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
charoff No No No No No

Decimal alignment using CSS

<style>
 td {
  text-align:right;
  font-variant-numeric:tabular-nums;
 }
</style>

5. valign attribute

The valign attribute defines the vertical alignment of a row content in the table. It was used in older HTML to align the content of a cell which is now replaced by CSS.

Syntax

<tr valign="top | middle | bottom | baseline">
Value Note
top It puts the text to the top of the cell as much as it can.
middle It puts the text to the center of the cell. It preserves both horizontal and vertical alignment.
bottom It puts the text to the bottom of the cell as much as it can.
baseline It also puts the text to the bottom of the cell but mainly align to the baseline of the characters.
Top Bottom
Middle Baseline
You will notice the difference between baseline and other valign attribute's values when the font-sizes are of different size.

With top value, Demo

With bottom value, Demo

With middle value, Demo

With baseline value, Demo

Always remember valign attribute only preserves vertical alignment. For horizontal alignment use the CSS property- text-align.

Supported Browsers

Attribute Chrome Internet Explorer Firefox Safari Opera Mini
valign Yes Yes Yes Yes Yes

Column align using CSS (modern and valid)

CSS property - vertical-align can replace the use of valign attribute.

<tr style="height:80px;">
 <td style="vertical-align:top;">
      Top
 </td>
 <td style="vertical-align:bottom;">
      Bottom
 </td>
</tr>
<tr style="height:80px;">
 <td style="vertical-align:middle;">
      Middle
 </td>
 <td style="vertical-align:baseline;">
      Baseline
 </td>
</tr>

Example of making similar alignment (say middle) of all the cells content within the <table> element.

<style>
 th, td {
 vertical-align:center;
 }
</style>
❮ Previous Next ❯