Table of Contents
INTRODUCTION
The <tr> element is used to create row of cells in an HTML table. An row is created for every pair of <tr> - </tr> tags.
Each row consists of group of header cell(<th>) or data cell(<td>) elements. The number of columns in a table corresponds to the number of header cells or data cells in a row.
Syntax:
<table>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Example:
<table>
<tr>
<td>Apple</td>
<td>$1</td>
<td>50</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.5</td>
<td>100</td>
</tr>
<tr>
<td>strawberry</td>
<td>$1.5</td>
<td>20</td>
</tr>
</table>
Output:
Apple | $1 | 50 |
Banana | $0.5 | 100 |
strawberry | $1.5 | 20 |
Usage Guidelines
- The <tr> tag can be a child of the <table>, <thead>, <tbody>, or <tfoot>.
- If you put <tr> directly inside <table>, the browser will automatically add a <tbody> around it.
- But this only works if the table doesn't already have a <tbody>, and only if the <tr> comes after things like <caption>, <colgroup>, or<thead>.
- When the browser adds that invisible <tbody>, some CSS rules like table > tr may not work because the <tr> isn't directly inside <table> anymore.
- To pick specific rows or cells with CSS, selectors like :nth-of-type, :first-of-type, or :last-of-type are generally used.
Attributes
The <tr> element only has global Attributes.
Deprecated Attributes
The following attribute are Deprecated and is advised to not use them. They are mentioned just for reference for updating legacy code or for historical interest.
- align
- align
- bgcolor
- char
- charoff
- valign
Tag Omission
- The start tag for <tr> is compulsory — you always need to write it.
- The end tag (</tr>) is optional and can be omitted in below cases:
- If another <tr> comes right after it.
- Or if it's the last row inside its group (like <thead>, <tbody>, or <tfoot>).