<tr>

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.

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:

Examples

Basic Table Row

Create a simple table with rows:

<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:

<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:

<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:

<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:

<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:

<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)

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

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

Default CSS Settings

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

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