HTML Table Row Element Tutorial - Usage, Syntax, attributes, faq and Example

calender-iconPublished: 25 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
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>).

Frequently Asked Questions (FAQ)

Can the <tr> tag be used directly inside a <table> element without using <thead>, <tbody>, or <tfoot> tags ?
Yes, you can place <tr> tags directly within a <table> element. If you do this, the browser will automatically wrap those <tr> elements inside a <tbody> element. This behavior is standard across modern browsers. However, it's considered best practice to explicitly use <thead>, <tbody>, and <tfoot> to clearly define the structure of your table. This approach enhances readability and accessibility, especially for assistive technologies.