HTML( tr )Table Tag – A Complete Guide for Beginners

Introduction: What Is the `<tr>` Tag in HTML Tables?

HTML tables are used to display data in rows and columns, such as:

Student marks
Product lists
Timetables
Reports

The <tr> tag plays a key role in tables because it defines a table row.

Without <tr>, a table cannot exist properly.

This guide explains the HTML <tr> tag in a simple, teacher-style, beginner-friendly way, with clear examples and best practices.

What Is the HTML tr Tag?

The HTML <tr> tag stands for Table Row.

In simple words:
A <tr> tag represents one horizontal row in a table.

Each row can contain:

Table headers (<th>)
Table data cells (<td>)

Basic Syntax of `<tr>` Tag

Key Points

<tr> is a container (paired) tag
It must be placed inside a <table>
It contains <th> or <td> elements

Simple Example: Table with One Row

<table border="1">
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
</table>

Explanation

<tr> creates one row
Each <td> creates a column inside that row

Table Structure Using tr, th, and td

<table border="1">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Aman</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Neha</td>
    <td>92</td>
  </tr>
</table>

How It Works

First <tr> → Header row
<th> → Bold, centered header cells
Next <tr> → Data rows
<td> → Normal data cells

Important Rule: Where tr Must Be Used

Correct structure:

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

Incorrect (Invalid HTML):

<tr>
  <td>Data</td>
</tr>

<tr> must always be inside <table> (or <thead>, <tbody>, <tfoot>).

Using tr Inside thead, tbody, tfoot

For professional tables, rows are grouped logically.

<table border="1">
  <thead>
    <tr>
      <th>Subject</th>
      <th>Marks</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Math</td>
      <td>90</td>
    </tr>
    <tr>
      <td>Science</td>
      <td>88</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total</td>
      <td>178</td>
    </tr>
  </tfoot>
</table>

Benefits

Better structure
Improved accessibility
Easier styling
SEO-friendly

Styling `<tr>` with CSS

Change Row Background Color

Alternate Row Colors (Zebra Striping)

Hover Effect on Rows

Improves user experience
Common in data tables

tr vs td vs th (Comparison)

Tag	Purpose
`<tr>`	Defines a table row
`<td>`	Defines table data
`<th>`	Defines table header

<tr> = row
<td> / <th> = cells inside the row

Common Beginner Mistakes

Using <tr> outside <table>
Forgetting <td> or <th> inside <tr>
Mixing table and non-table elements
Using <br> instead of rows
Styling with HTML attributes instead of CSS

HTML tr Tag and SEO

Helps search engines understand tabular data
Improves content clarity
Works well with semantic table tags
Indirect SEO benefit through structure

Real-World Example: Student Marks Table

<table border="1">
  <tr>
    <th>Student Name</th>
    <th>Class</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>10</td>
    <td>87</td>
  </tr>
  <tr>
    <td>Pooja</td>
    <td>10</td>
    <td>91</td>
  </tr>
</table>

FAQs: HTML tr Tag

What does `<tr>` stand for?

Table Row.

Can `<tr>` exist without `<td>`?

No, it must contain <td> or <th>.

Can I style `<tr>` using CSS?

Yes, fully.

Is `<tr>` deprecated?

No, it is fully supported in HTML5.

Can `<tr>` be inside `<div>`?

No, it must be inside <table>.