Skip to content
html.sh

<tr> - Table Row Element

The <tr> Element

Section titled “The <tr> Element”
Table Element

The <tr> (table row) element defines a row of cells in a table. Each row contains one or more <th> (header) or <td> (data) cells. Rows are the fundamental building blocks of table structure, organizing data horizontally across columns.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Parent Elements

Section titled “Parent Elements”

The <tr> element can only appear inside:

  • <table> (directly, though not recommended)
  • <thead> (for header rows)
  • <tbody> (for body rows)
  • <tfoot> (for footer rows)

Attributes

Section titled “Attributes”

Global Attributes

Section titled “Global Attributes”

The <tr> element supports all global HTML attributes.

Deprecated Attributes

Section titled “Deprecated Attributes”

Common Use Cases

Section titled “Common Use Cases”

Data Rows

Section titled “Data Rows”
Result

Rows with Headers

Section titled “Rows with Headers”
Result

Interactive Rows

Section titled “Interactive Rows”
Result

Styling Table Rows

Section titled “Styling Table Rows”

Alternating Row Colors (Zebra Striping)

Section titled “Alternating Row Colors (Zebra Striping)”
Result

Row Hover Effects

Section titled “Row Hover Effects”
Result

Conditional Row Styling

Section titled “Conditional Row Styling”
Result

Row Selection and Highlighting

Section titled “Row Selection and Highlighting”
Result

Rows with Spanning Cells

Section titled “Rows with Spanning Cells”

Colspan Example

Section titled “Colspan Example”
Result

Accessibility with Rows

Section titled “Accessibility with Rows”

Proper Row Headers

Section titled “Proper Row Headers”
Result

Advanced Row Patterns

Section titled “Advanced Row Patterns”

Expandable Rows

Section titled “Expandable Rows”
Result

Grouped Rows

Section titled “Grouped Rows”
Result

CSS Styling Reference

Section titled “CSS Styling Reference”
/* Basic row styling */
tr {
  border-bottom: 1px solid #ddd;
}


/* Alternating rows */
tr:nth-child(odd) {
  background-color: #f9f9f9;
}


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


/* Hover effect */
tbody tr:hover {
  background-color: #e8f4f8;
  cursor: pointer;
}


/* First and last row */
tbody tr:first-child {
  border-top: 2px solid #333;
}


tbody tr:last-child {
  border-bottom: 2px solid #333;
}


/* Selected row */
tr.selected {
  background-color: #3498db;
  color: white;
}


/* Row with status */
tr.active {
  border-left: 4px solid #28a745;
}


tr.pending {
  border-left: 4px solid #ffc107;
}


tr.inactive {
  border-left: 4px solid #dc3545;
}


/* Transition effects */
tr {
  transition: all 0.3s ease;
}


tr:hover {
  transform: scale(1.01);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

JavaScript Interaction

Section titled “JavaScript Interaction”

Rows are commonly manipulated with JavaScript:

// Select all rows in tbody
const rows = document.querySelectorAll('tbody tr');


// Add click handler to each row
rows.forEach(row => {
  row.addEventListener('click', () => {
    // Toggle selected class
    row.classList.toggle('selected');
  });
});


// Add a new row
const tbody = document.querySelector('tbody');
const newRow = tbody.insertRow();
const cell1 = newRow.insertCell(0);
const cell2 = newRow.insertCell(1);
cell1.textContent = 'New Item';
cell2.textContent = 'New Value';


// Delete a row
rows[0].remove();

Best Practices

Section titled “Best Practices”

Use Semantic Parents

Always place <tr> inside <thead>, <tbody>, or <tfoot>, not directly in <table>.

Consistent Cell Count

Ensure each row has the same number of cells (accounting for colspan/rowspan).

Use Row Headers

Use <th scope="row"> for the first cell when it labels the row.

Consider Performance

For very long tables, consider pagination or virtual scrolling.

Add Hover States

Improve UX by highlighting rows on hover.

Test Accessibility

Ensure screen readers can navigate rows properly.

Common Mistakes to Avoid

Section titled “Common Mistakes to Avoid”

Don’t Mix Row Types

Section titled “Don’t Mix Row Types”
<!-- ❌ Bad: mixing header and data cells incorrectly -->
<tr>
  <th>Name</th>
  <td>Age</td>
  <th>Location</th>
</tr>


<!-- ✅ Good: use th only for headers -->
<tr>
  <th scope="row">John Doe</th>
  <td>32</td>
  <td>New York</td>
</tr>

Don’t Skip Parent Elements

Section titled “Don’t Skip Parent Elements”
<!-- ❌ Bad: tr directly in table -->
<table>
  <tr><td>Data</td></tr>
</table>


<!-- ✅ Good: tr inside tbody -->
<table>
  <tbody>
    <tr><td>Data</td></tr>
  </tbody>
</table>

Don’t Forget Consistency

Section titled “Don’t Forget Consistency”
<!-- ❌ Bad: inconsistent cell counts -->
<tbody>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <!-- Missing third cell! -->
  </tr>
</tbody>


<!-- ✅ Good: consistent structure -->
<tbody>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
</tbody>

Browser Support

Section titled “Browser Support”

The <tr> element is supported in all browsers:

  • ✅ Chrome (all versions)
  • ✅ Firefox (all versions)
  • ✅ Safari (all versions)
  • ✅ Edge (all versions)
  • ✅ Opera (all versions)
  • ✅ Internet Explorer (all versions)
Section titled “Related Elements”

Specifications

Section titled “Specifications”