← Back to All Tags

<tr>

Defines a row in a table

Definition and Usage

The <tr> element establishes a row in an HTML table.

A <tr> element contains one or more <th> (table header) or <td> (table data) elements.

Table rows are used to organize table data into horizontal lines. Each row can contain header cells or data cells that align vertically to form columns.

Tip: The <tr> tag must be a child of <table>, <thead>, <tbody>, or <tfoot> elements.
Note: Use CSS to style table rows. The old HTML attributes for styling are deprecated.

Browser Support

The <tr> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <tr> tag supports the Global Attributes in HTML.

The <tr> tag also supports the Event Attributes in HTML.

Deprecated Attributes

The following attributes are deprecated and should not be used. Use CSS instead:

Attribute Value Description
align left, right, center, justify, char Deprecated in HTML5 specifications. Use CSS text-align instead
bgcolor color_name, hex_number, rgb_number Deprecated in HTML5 specifications. Use CSS background-color instead
char character Deprecated in HTML5 specifications. Specifies alignment to a character
charoff number Deprecated in HTML5 specifications. Specifies number of characters to offset
valign top, middle, bottom, baseline Deprecated in HTML5 specifications. Use CSS vertical-align instead

Examples

Basic Table Row

Create a simple table with rows:

Example

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>Los Angeles</td>
  </tr>
</table>

Table with Header Row

Use <thead> to group header rows:

Example

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$29</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

Styled Table Rows

Apply CSS styling to table rows:

Example

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

  tr {
    border-bottom: 1px solid #ddd;
  }

  tr:hover {
    background-color: #f5f5f5;
  }

  th {
    background-color: #745af2;
    color: white;
    padding: 12px;
    text-align: left;
  }

  td {
    padding: 12px;
  }
</style>

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>jane@example.com</td>
  </tr>
</table>

Zebra Striped Rows

Create alternating row colors:

Example

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

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

  tr:nth-child(odd) {
    background-color: var(--bg-primary);
  }

  th, td {
    padding: 10px;
    text-align: left;
  }
</style>

<table>
  <tr>
    <th>Item</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>Item 1</td>
    <td>Active</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>Pending</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Complete</td>
  </tr>
</table>

Row with Colspan

Span cells across multiple columns:

Example

<table border="1">
  <tr>
    <th>Month</th>
    <th>Sales</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$5000</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$6000</td>
  </tr>
  <tr>
    <td colspan="2" style="text-align: center; font-weight: bold;">Total: $11,000</td>
  </tr>
</table>

Complex Table Structure

Combine header, body, and footer rows:

Example

<table border="1" style="width: 100%;">
  <thead>
    <tr>
      <th>Course</th>
      <th>Instructor</th>
      <th>Duration</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML Basics</td>
      <td>John Smith</td>
      <td>4 weeks</td>
      <td>$99</td>
    </tr>
    <tr>
      <td>CSS Advanced</td>
      <td>Jane Doe</td>
      <td>6 weeks</td>
      <td>$149</td>
    </tr>
    <tr>
      <td>JavaScript Pro</td>
      <td>Bob Johnson</td>
      <td>8 weeks</td>
      <td>$199</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3" style="text-align: right;"><strong>Total:</strong></td>
      <td><strong>$447</strong></td>
    </tr>
  </tfoot>
</table>

Table Structure

Understanding how <tr> fits into table structure:

  • <table>: Container for the entire table
  • <thead>: Groups header rows (optional)
  • <tbody>: Groups body rows (optional but recommended)
  • <tfoot>: Groups footer rows (optional)
  • <tr>: Defines a table row
  • <th>: Table header cell (inside tr)
  • <td>: Table data cell (inside tr)
Hierarchy: table → thead/tbody/tfoot → tr → th/td

Accessibility

Make your table rows accessible:

  • Use <th> for header cells with scope attribute
  • Provide clear, descriptive headers for each column
  • Use <caption> to describe the table's purpose
  • Keep table structure simple and logical
  • Avoid using tables for layout (use CSS Grid or Flexbox instead)
  • Ensure sufficient color contrast for text
  • Test with screen readers to verify proper navigation
Tip: Screen readers navigate tables row by row, announcing headers for context.

Best Practices

  • Semantic Structure: Use <thead>, <tbody>, and <tfoot> to group rows logically
  • Header Cells: Always use <th> for header rows instead of <td>
  • Consistent Columns: Ensure all rows have the same number of columns (or use colspan)
  • CSS Styling: Use CSS instead of deprecated HTML attributes for styling
  • Hover Effects: Add hover states to improve user experience
  • Responsive Design: Make tables responsive for mobile devices
  • Accessibility: Include proper ARIA labels and scope attributes
  • Performance: For large tables, consider pagination or virtual scrolling

Try it Yourself

Interactive Example

Here's a live table with styled rows:

Student Grade Status
Alice Johnson A+ Excellent
Bob Smith B Good
Carol Davis A Very Good

Default CSS Settings

Most browsers will display the <tr> element with the following default values:

Default CSS

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

Related Tags

  • <table>

    Defines an HTML table

  • <thead>

    Groups table header content

  • <tbody>

    Groups table body content

  • <tfoot>

    Groups table footer content

  • <th>

    Defines a table header cell

  • <td>

    Defines a table data cell