Table Rows with tr

Technical Deep Dive & Specifications

The HTMLTableRowElement DOM Interface

Every <tr> in the DOM tree instantiates the HTMLTableRowElement interface. It provides direct, highly optimized access to its internal cells and its position within the table:

[HTMLTableRowElement Interface]
 ├── Properties:
 │    ├── cells            --> Live HTMLCollection of all <th> and <td> elements in this row
 │    ├── rowIndex         --> Zero-based index of this row relative to the ENTIRE <table>
 │    └── sectionRowIndex  --> Zero-based index of this row relative to its parent (<thead>, <tbody>, or <tfoot>)
 └── Methods:
      ├── insertCell(idx)  --> Creates and appends/inserts a new <td> cell at index
      └── deleteCell(idx)  --> Removes the cell at index

rowIndex vs. sectionRowIndex: The Critical Difference

Understanding this distinction is vital when building sorting algorithms or handling row click events:

<table>
  <thead>
    <tr> <!-- rowIndex: 0, sectionRowIndex: 0 -->
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr> <!-- rowIndex: 1, sectionRowIndex: 0 (First row of <tbody>!) -->
      <td>1</td>
      <td>Alice</td>
    </tr>
    <tr> <!-- rowIndex: 2, sectionRowIndex: 1 -->
      <td>2</td>
      <td>Bob</td>
    </tr>
  </tbody>
</table>

Parsing Rules and Nesting Constraints

The WHATWG specification enforces strict content models on <tr>:

1. Permitted Parents: <tr> may only exist as a direct child of <table>, <thead>, <tbody>, or <tfoot>.
2. Permitted Children: <tr> may only contain <td>, <th>, or script-supporting elements (<script>, <template>).
3. No Direct Nesting: A <tr> cannot be nested inside another <tr>.
4. No Raw Content: Placing <p>, <div>, or raw text directly inside a <tr> (outside of a <td>/<th>) is an HTML syntax error. Browsers will foster-parent the stray content out of the row!

INVALID:                                VALID:
<tr>                                    <tr>
  <div>Illegal direct child</div> ===>    <td>
  <p>Illegal paragraph</p>                  <div>Legal container inside cell</div>
</tr>                                       <p>Legal paragraph inside cell</p>
                                          </td>
                                        </tr>

Modern Row Styling: Zebra Striping & Hover States

Tables with numerous records can cause visual fatigue where eyes wander between lines. Zebra striping alternates row background colors to improve horizontal scanning readability.

/* Target only body rows (leave the header untouched) */
tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

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

/* Accessible, subtle hover feedback */
tbody tr:hover {
  background-color: #f1f5f9;
  transition: background-color 150ms ease-in-out;
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 26–28 (tbody tr:nth-child(even)): Applies a soft background tint to every second row inside <tbody>, leaving the header row dark.
• Line 30–33 (tbody tr:hover): Provides instantaneous visual feedback when the cursor hovers over any data record.
• Line 53–58 (<tr onclick="inspectRow(this)">): Attaches an event handler passing the HTMLTableRowElement reference this.
• Line 81–84 (rowElement.cells[...]): Accesses the row's child cells through the cells collection property (cells[0] for Order ID, cells[3] for Amount).
• Line 86 (rowElement.rowIndex vs sectionRowIndex): Demonstrates that for #ORD-781, rowIndex is 1 (because header is 0), while sectionRowIndex is 0 (first row of <tbody>).

Expected Browser Render Output

Customer Fulfillment Ledger

ORDER ID    CUSTOMER            STATUS        AMOUNT
------------------------------------------------------
#ORD-781    Acme Corp           Fulfilled     $1,420.00  (White background)
#ORD-782    Stark Tech          Processing    $9,850.00  (Light gray background)
#ORD-783    Wayne Enterprises   Shipped       $4,100.00  (White background)
#ORD-784    Cyberdyne Inc       Fulfilled     $870.00    (Light gray background)

[When clicking Row 2 (#ORD-782)]:
Selected: #ORD-782 ($9,850.00) | rowIndex: 2 | sectionRowIndex: 1