Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <tr> tag.

Overview Content

1 Use of <tr> tag
2 Example of <tr> tag
3 Supported Browsers
4 Full code Example
5 Attributes of <tr> tag
     5.1 abbr
     5.2 bgcolor
     5.3 char
     5.4 charoff
     5.5 valign

Use of <tr> tag

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

Some related elements of <tr> element:
1. <td>: It defines a table cell.
2. <th>: It defines a table heading.
3. <caption>: It defines a table name.
4. <table>: It defines a HTML table.
5. <col>: It defines a column in table and used in defining the properties of each columns within <colgroup> element.
6. <colgroup>: It defines a group of columns in a table.
7. <thead>: It defines a set of rows that defines header section in a table.
8. <tbody>: It defines a set of rows that defines body section in a table.
9. <tfoot>: It defines a set of rows that defines foot section in a table.

Example of <tr> tag

   <tr>
     <th> Name </th>
     <th> Expenditure </th>
   </tr>

Supported Browsers.

Tag
<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> 21 </td>
</tr>
<tr>
<td> Bruce </td>
<td> 24 </td>
</tr>
</table>
</body>
</html>

Attributes of <th> tag

Tag Value Notes
align left
center
right
justify
char
It defines the horizontal alignment of the content in a table row.
bgcolor rgb(x,x,x)
#xxxxxx
color_name
It defines the background color for a table row.
char character It defines the alignment of the content to a character in a table row.
charoff number It defines the number of characters the content will be aligned from the character specified by the char attribute in a table row.
valign top
middle
bottom
baseline
It defines the vertical alignment of the cell content in the table row.

1. align attribute

Explaination:The align attribute defines the horizontal alignment of the content in a table row.
Default value without mentioning align attribute in <th> element is center and in <td> element is left.
The align attribute is not supported in HTML5.Use CSS property - "text-align" like
<tr style="text-align:center">

Syntax:

<tr align="left | center | right | justify | char">

Example:

<table>
<tr align="left">
<th> Name </th>
<th> Monthly expenditure </th>
</tr>
</table>

Supported Browsers

Attribute
align Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
left It defines left alignment content.
center It defines center alignment content.
right It defines right alignment content.
justify It defines equal lines in length.
character It defines content alignment to a specific character.

2. bgcolor attribute

Explaination:The bgcolor attribute defines the background-color for a table row.
This attribute is not supported in HTML5.Use CSS property "background-color" like
<tr style="background-color:red">
Click here, to learn more about HTML color.

Syntax:

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

Example:

<table>
<tr bgcolor="red">
<th> Name </th>
<th> Monthly expenditure </th>
</tr>
</table>

Supported Browsers

Attribute
bgcolor Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
colorname 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)").

3. char attribute

Explaination: The char attribute defines the alignment of the content to a character in a table row. This attribute is valid only when the align attribute is set to char.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<tr char="character">

Example:

<table>
<tr align="char" char=".">
<th> Name </th>
<th> Monthly expenditure </th>
</tr>
</table>

Supported Browsers

Attribute
char Not Supported Not Supported Not Supported Not Supported Not Supported

4. charoff attribute

Explaination: The charoff attribute defines the number of characters the content will be aligned from the character specified by the char attribute in a table row.
This attribute is valid only when the align attribute is set to char.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<tr charoff="number">

Example:

<table>
<tr align="char" char="N" charoff="2">
<th> Name </th>
<th> Monthly expenditure </th>
</tr>
</table>

Supported Browsers

Attribute
charoff Not Supported Not Supported Not Supported Not Supported Not Supported
Attribute values
Attribute Notes
positive number It specifies alignment to the right of the character.
negative number It specifies alignment to the left of the character.

5. valign attribute

Explaination: The valign attribute defines the vertical alignment of the cell content in a table row.
This attribute is not supported in HTML5.Use CSS property "vertical-align" like
<tr style="vertical-align:bottom">.

Syntax:

<tr valign="top | middle | bottom | baseline">

Example:

<table>
<tr valign="bottom">
<th> Name </th>
<td> Monthly Saving </th>
</tr>
</table>

Supported Browsers

Attribute
valign Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
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.
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 as much as it can but mainly align to the baseline of the characters
You will notice the difference between bottom and baseline when the font-sizes are of different sizes like Explain

With bottom attribute,Exclaim

With baseline attribute,Exclaim