tr

The tr element defines a row of cells in a table. It can contain header cells (th) and/or data cells (td) and must be a direct child of thead, tbody, or tfoot.

Description

The <tr> (table row) element is a container for a horizontal group of cells. Each row must contain at least one <th> or <td> element, and all rows in a table should have the same number of cells (accounting for colspan).

Vanilla Breeze applies hover effects to rows within <tbody> to help users track data across columns.

When to Use

  • Every table row: All rows of data, headers, and footers require tr elements
  • Grouping cells: Each horizontal set of related data goes in one row
  • Header rows: In thead, rows typically contain th elements
  • Data rows: In tbody, rows typically contain td elements (with optional th for row headers)

Basic Example

Rows contain cells that align with the table's column structure.

Team Members
Name Role Location
Alice Johnson Developer New York
Bob Smith Designer San Francisco
Carol Williams Manager Chicago
<table> <caption>Team Members</caption> <thead> <tr> <th scope="col">Name</th> <th scope="col">Role</th> <th scope="col">Location</th> </tr> </thead> <tbody> <tr> <td>Alice Johnson</td> <td>Developer</td> <td>New York</td> </tr> <!-- More rows --> </tbody> </table>

Rows with Row Headers

Use <th scope="row"> in data rows to identify row headers.

Feature Comparison
Feature Basic Pro Enterprise
Storage 5 GB 50 GB Unlimited
Users 1 10 Unlimited
Support Email Priority 24/7 Phone
API Access No Yes Yes
<tr> <th scope="row">Storage</th> <td>5 GB</td> <td>50 GB</td> <td>Unlimited</td> </tr>

Row Hover Effect

Rows in tbody receive a hover effect to help users track data horizontally.

Hover over rows to see the effect
Product Category Price Stock
Laptop Stand Accessories $49.99 125
Wireless Mouse Peripherals $29.99 340
USB-C Hub Accessories $39.99 78
Monitor Arm Furniture $89.99 45
/* Vanilla Breeze default hover */ tbody tr:hover { background: var(--color-surface-raised); }

Rows with Spanning Cells

Use colspan and rowspan attributes on cells to span multiple columns or rows.

Schedule with Spanning Cells
Time Monday Tuesday Wednesday
9:00 Team Meeting Planning Code Review
10:00 All-Hands Meeting
11:00 Development Development Development
<tr> <th scope="row">9:00</th> <td rowspan="2">Team Meeting</td> <td>Planning</td> <td>Code Review</td> </tr> <tr> <th scope="row">10:00</th> <td colspan="2">All-Hands Meeting</td> </tr>

Group Header Rows

Rows can serve as group headers within tbody sections.

Products by Category
Product Price Stock
Electronics
Wireless Mouse $29.99 150
USB-C Hub $39.99 75
Furniture
Monitor Stand $49.99 45
Desk Organizer $24.99 120

Accessibility

  • Consistent cell count: All rows should have the same number of cells (accounting for colspan)
  • Row headers: Use <th scope="row"> when the first cell identifies the row
  • Screen reader navigation: Users can navigate row by row through table data
  • Implicit role: tr has an implicit ARIA role of row

JavaScript Interaction

Common operations with table rows:

// Add click handler to rows const rows = document.querySelectorAll('tbody tr'); rows.forEach(row => { row.addEventListener('click', () => { // Handle row click console.log('Row clicked:', row); }); }); // Add a new row const tbody = document.querySelector('tbody'); const newRow = tbody.insertRow(); newRow.innerHTML = ` <td>New Item</td> <td data-numeric>$99.99</td> `; // Remove a row const rowToRemove = tbody.rows[0]; rowToRemove.remove(); // Get row index const row = document.querySelector('tbody tr:first-child'); console.log(row.rowIndex); // Index in the table console.log(row.sectionRowIndex); // Index within tbody

Valid Parent Elements

The tr element must be a child of one of these elements:

Parent Purpose Typical Content
<thead> Header rows <th scope="col"> cells
<tbody> Data rows <td> and optional <th scope="row">
<tfoot> Footer/summary rows <td> cells with totals/summaries

Related Elements