HTML table rows are used to organize data horizontally inside an HTML table. The <tr> element defines a table row and contains table header cells (<th>) or data cells (<td>).

You can use HTML table rows to display student details, employee information, product prices, marks, and other structured data on a webpage.

What Is an HTML Table Row?

An HTML table row is created using the <tr> tag. Each row groups related cells together, allowing the browser to display information in a structured format.

The <tr> tag is placed inside the <table> element.

<table>
  <tr>
    <td>Rahul</td>
    <td>21</td>
    <td>India</td>
  </tr>
</table>

In this example, the table contains one row with three data cells displaying a name, age, and country.

HTML Table Row Syntax

The basic syntax of an HTML table row is shown below.

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Arun</td>
    <td>22</td>
  </tr>
</table>

The first <tr> element contains the column headings, while the second <tr> element contains the actual data.

HTML Table Rows Example

The following example demonstrates how to create multiple rows in an HTML table.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Table Rows Example</title>
</head>
<body>

  <h2>Student Details</h2>

  <table>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Course</th>
    </tr>
    <tr>
      <td>Rahul</td>
      <td>21</td>
      <td>HTML</td>
    </tr>
    <tr>
      <td>Priya</td>
      <td>22</td>
      <td>CSS</td>
    </tr>
    <tr>
      <td>Arjun</td>
      <td>20</td>
      <td>JavaScript</td>
    </tr>
  </table>

</body>
</html>

In this example, the table contains four rows. The first row displays the headings, and the remaining three rows display student information.

How to Add Multiple Rows in HTML

To add more rows to a table, insert additional <tr> elements inside the <table> element. Each row can contain the number of cells needed for the data.

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Keyboard</td>
    <td>₹800</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>₹400</td>
  </tr>
  <tr>
    <td>Monitor</td>
    <td>₹8,000</td>
  </tr>
</table>

This table displays three products in separate rows. Each product row contains two cells: the product name and its price.

HTML Table Rows with Borders

You can use CSS to add borders to table rows and cells. This makes the table easier to read.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>IT</td>
  </tr>
  <tr>
    <td>Priya</td>
    <td>HR</td>
  </tr>
</table>

The border-collapse property combines adjacent borders, while padding adds space inside each cell.

HTML Table Rows with CSS Styling

CSS allows you to customize table rows with background colors, text styles, and hover effects.

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }

  th {
    background-color: #0878d1;
    color: white;
  }

  tbody tr:nth-child(even) {
    background-color: #f2f6fa;
  }

  tbody tr:hover {
    background-color: #dcecff;
  }
</style>

The :nth-child(even) selector applies a background color to even-numbered rows. The :hover selector changes a row’s background when the pointer moves over it.

These styles improve readability, especially when a table contains many rows.

HTML Table Rows Using the <tbody> Element

The <tbody> element groups the main data rows of a table. It helps separate the table body from its header and footer.

<table>
  <thead>
    <tr>
      <th>Employee ID</th>
      <th>Name</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>101</td>
      <td>Rahul</td>
    </tr>
    <tr>
      <td>102</td>
      <td>Priya</td>
    </tr>
  </tbody>
</table>

Here, <thead> contains the heading row, and <tbody> contains the employee records. Each <tr> still defines an individual row.

Difference Between <tr>, <th>, and <td>

HTML Tag	Purpose
<tr>	Creates a table row
<th>	Creates a header cell
<td>	Creates a standard data cell

These elements work together to organize table information correctly.

Common Mistakes When Using HTML Table Rows

Avoid these common mistakes when creating table rows:

• Placing <tr> elements outside the table structure.
• Forgetting to close <tr>, <th>, or <td> elements.
• Using <tr> to create columns instead of rows.
• Adding inconsistent numbers of cells when the table requires a regular structure.
• Using tables for webpage layouts instead of modern CSS layout techniques.
• Forgetting to use meaningful header cells for accessible tables.

HTML Table Rows Exercises

Practice these exercises to improve your understanding of the <tr> element.

Exercise 1: Create a table with three rows containing student names and ages.

Exercise 2: Create an employee table with four columns and five data rows.

Exercise 3: Add CSS borders and padding to every table cell.

Exercise 4: Use the :nth-child(even) selector to apply a background color to alternate rows.

Exercise 5: Create a table using <thead> and <tbody> to organize the headings and data.