📊 Chapter 19: Advanced Table Techniques

Tables with Expandable Rows

Master-Detail Accordion Rows, `aria-expanded`, `aria-controls`, and Nested Sub-Tables

LEARNING OBJECTIVES ⌵

Construct master-detail table architectures using paired parent and collapsible child <tr> rows.
Connect interactive toggles to expandable containers using aria-expanded and aria-controls.
Span detail rows across full grid widths using <td colspan="100%"> (or precise column counting).
Embed nested sub-tables and metadata drawers without corrupting the parent table's accessibility tree.

🎬 INTERACTIVE VISUAL PIPELINE Core Architecture Simulation

🌐

1. Input

Directives & Tags

⚙️

2. Parse

Tokenizer & AST

🌳

3. Layout

Box Model & Flow

🎨

4. Render

GPU Paint & Composite

PHASE 1: INPUT & DIRECTIVES

Browser receives declarative markup stream, parsing tag tokens and initializing component state.

📖 The Mental Model & Story (Intuitive Foundation)

Think of an executive summary binder. The summary sheet lists high-level project metrics: Project Name, Budget, and Status. Tucked behind each summary page is a tabbed pocket folder containing detailed receipts, team rosters, and itemized invoices.

When reviewing the binder, you don't want all 500 pages of receipts spilling out simultaneously. You want to inspect the summary line, pull open the tabbed folder for a specific project, review its receipts, and tuck it back in when finished.

+-----------------------------------------------------------------------------------------+
| [▶] Order #1042  |  Acme Corp      |  3 Items  |  $1,420.00  |  Shipped                 |  <-- Master Row
+-----------------------------------------------------------------------------------------+
|  └── [▼] (Expanded Detail Drawer - <td colspan="5">)                                     |
|      +-------------------------------------------------------------------------------+  |
|      | Item Description                 | SKU       | Qty | Unit Price | Line Total  |  |  <-- Nested Table
|      |----------------------------------+-----------+-----+------------+-------------|  |
|      | 4K Ultra-HD Monitor              | MON-4K-01 |  2  | $600.00    | $1,200.00   |  |
|      | Ergonomic Monitor Arm Mount      | ARM-DS-02 |  2  | $110.00    |   $220.00   |  |
|      +-------------------------------------------------------------------------------+  |
+-----------------------------------------------------------------------------------------+
| [▶] Order #1043  |  Globex Corp    |  1 Item   |    $89.00   |  Processing              |  <-- Master Row
+-----------------------------------------------------------------------------------------+

In web engineering, this is the Master-Detail Accordion Pattern. It keeps the primary grid readable while giving users instant, non-destructive access to relational sub-records.

Technical Deep Dive & Specifications

2.1 The Two-Row Pairing Pattern

In pure semantic HTML, a table row (<tr>) cannot directly contain another <tr>. To represent parent-child relational data, we pair two sequential sibling rows in the <tbody>:

<tbody>
  <!-- 1. Master Row -->
  <tr class="master-row">
    <td>
      <button 
        type="button" 
        class="toggle-btn"
        aria-expanded="false" 
        aria-controls="order-details-1042"
        id="toggle-btn-1042">
        <span class="chevron" aria-hidden="true">▶</span>
        <span class="sr-only">Toggle order 1042 details</span>
      </button>
    </td>
    <td>#1042</td>
    <td>Acme Corp</td>
    <td>$1,420.00</td>
  </tr>

  <!-- 2. Detail Row -->
  <tr id="order-details-1042" class="detail-row" hidden>
    <td colspan="4">
      <div class="drawer-content">
        <!-- Sub-table or detailed metadata here -->
      </div>
    </td>
  </tr>
</tbody>

2.2 The `colspan="100%"` / Dynamic Colspan Rule

To make the detail drawer span the entire width of the table, the child <td> must span all columns.

In HTML standards, specifying <td colspan="4"> (matching the exact number of header columns) is the most robust approach.
In modern browsers, <td colspan="100%"> or <td colspan="99"> automatically expands to the maximum number of available columns without throwing parsing errors.

2.3 ARIA Accessibility Wireframe

Assistive technologies rely on explicit programmatic relationships to understand expandable UI:

[ <button id="btn-1" aria-expanded="false" aria-controls="drawer-1"> ]
                              │
                              │ (aria-controls references ID)
                              ▼
[ <tr id="drawer-1" hidden aria-labelledby="btn-1"> ]

Semantic Attribute	Location	Functional Impact
`aria-expanded="false"`	Toggle `<button>`	Announces "collapsed" or "expanded" state to screen readers upon focus and activation.
`aria-controls="ID"`	Toggle `<button>`	Programmatically links the button to the DOM element it controls.
`id="ID"`	Detail `<tr>`	Unique target identifier referenced by `aria-controls`.
`hidden`	Detail `<tr>`	Completely removes the collapsed drawer from the Accessibility Tree until expanded.

2.4 Nested Tables & Accessibility Trees

When embedding a nested <table> inside the detail drawer:

The inner table is completely isolated in the DOM hierarchy inside its host <td>.
The nested table must define its own independent <thead>, <th> scope="col", and <tbody>.
Screen readers seamlessly switch context when entering the nested table and announce its internal column headers accurately.

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL example.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Lines 134–144: The <button> uses aria-expanded="false" and points to aria-controls="detail-ord-101", providing explicit programmatic linkage.
Lines 149–181: The detail row (<tr id="detail-ord-101" class="detail-row" hidden>) spans all 5 columns with <td colspan="5"> and encloses a fully semantic nested <table class="sub-table">.
Lines 76–84: Smooth CSS transform (transform: rotate(90deg)) rotates the chevron icon when aria-expanded="true".
Lines 224–240: Event delegation captures toggle clicks, flips aria-expanded, and toggles the native detailRow.hidden property.

Expected Browser Render Output

A customer fulfillment table with Orders ORD-101 and ORD-102.
Clicking the ▶ button on ORD-101 rotates the chevron to ▼ and smoothly expands the blue-accented drawer showing a nested 2-row itemized invoice table.
Screen readers announce: "Toggle details for order ORD-101, button, expanded".

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Master-Detail Expandable Table</title>
  <style>
    :root {
      --color-primary: #2563eb;
      --color-border: #e2e8f0;
      --color-bg: #f8fafc;
      --color-surface: #ffffff;
      --color-drawer-bg: #f1f5f9;
      --color-text: #1e293b;
      --color-muted: #64748b;
    }

[hidden] {
      display: none !important;
    }

body {
      font-family: system-ui, -apple-system, sans-serif;
      background: var(--color-bg);
      color: var(--color-text);
      padding: 2rem;
      margin: 0;
    }

.card {
      max-width: 900px;
      margin: 0 auto;
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

table.master-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

table.master-table > thead {
      background: #f8fafc;
      border-bottom: 2px solid var(--color-border);
    }

table.master-table th, 
    table.master-table td {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid var(--color-border);
    }

/* Chevron Toggle Button */
    .toggle-button {
      background: none;
      border: 1px solid var(--color-border);
      border-radius: 4px;
      padding: 0.35rem 0.55rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease;
    }

.toggle-button:hover,
    .toggle-button:focus-visible {
      background: #e2e8f0;
      outline: 2px solid var(--color-primary);
    }

.chevron {
      display: inline-block;
      transition: transform 0.2s ease;
      font-size: 0.75rem;
      color: var(--color-muted);
    }

.toggle-button[aria-expanded="true"] .chevron {
      transform: rotate(90deg);
      color: var(--color-primary);
    }

/* Detail Row & Drawer */
    tr.detail-row > td {
      padding: 0;
      background-color: var(--color-drawer-bg);
    }

.drawer-content {
      padding: 1.25rem 1.5rem;
      border-left: 4px solid var(--color-primary);
    }

/* Sub-Table Styling */
    table.sub-table {
      width: 100%;
      border-collapse: collapse;
      background: #ffffff;
      border-radius: 6px;
      border: 1px solid var(--color-border);
      overflow: hidden;
      font-size: 0.875rem;
    }

table.sub-table th,
    table.sub-table td {
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid var(--color-border);
    }

table.sub-table th {
      background: #f8fafc;
      color: var(--color-muted);
      font-weight: 600;
    }

.status-badge {
      padding: 0.2rem 0.6rem;
      border-radius: 9999px;
      font-size: 0.75rem;
      font-weight: bold;
    }

.status-shipped { background: #dcfce7; color: #166534; }
    .status-pending { background: #fef3c7; color: #92400e; }

.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  </style>
</head>
<body>

<div class="card">
  <table class="master-table">
    <caption style="text-align:left; padding:1rem; font-weight:bold; font-size:1.15rem;">
      Customer Fulfillment Orders
    </caption>
    <thead>
      <tr>
        <th scope="col" style="width: 50px;"><span class="sr-only">Details Toggle</span></th>
        <th scope="col">Order ID</th>
        <th scope="col">Customer</th>
        <th scope="col">Total Value</th>
        <th scope="col">Status</th>
      </tr>
    </thead>
    <tbody>
      
      <tr class="master-row">
        <td>
          <button 
            type="button" 
            class="toggle-button" 
            id="btn-ord-101" 
            aria-expanded="false" 
            aria-controls="detail-ord-101">
            <span class="chevron" aria-hidden="true">▶</span>
            <span class="sr-only">Toggle details for order ORD-101</span>
          </button>
        </td>
        <td><strong>ORD-101</strong></td>
        <td>Acme Logistics</td>
        <td>$1,250.00</td>
        <td><span class="status-badge status-shipped">Shipped</span></td>
      </tr>
      
      <tr id="detail-ord-101" class="detail-row" hidden>
        <td colspan="5">
          <div class="drawer-content">
            <h4 style="margin: 0 0 0.75rem 0; font-size: 0.95rem;">Itemized Receipt for ORD-101</h4>
            <table class="sub-table">
              <thead>
                <tr>
                  <th scope="col">Item Description</th>
                  <th scope="col">SKU</th>
                  <th scope="col">Qty</th>
                  <th scope="col">Unit Price</th>
                  <th scope="col">Line Total</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Industrial Ethernet Switch 24-Port</td>
                  <td><code>NET-SW-24</code></td>
                  <td>2</td>
                  <td>$500.00</td>
                  <td>$1,000.00</td>
                </tr>
                <tr>
                  <td>Cat6A Patch Cables (Pack of 10)</td>
                  <td><code>CBL-C6A-10</code></td>
                  <td>5</td>
                  <td>$50.00</td>
                  <td>$250.00</td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>

<tr class="master-row">
        <td>
          <button 
            type="button" 
            class="toggle-button" 
            id="btn-ord-102" 
            aria-expanded="false" 
            aria-controls="detail-ord-102">
            <span class="chevron" aria-hidden="true">▶</span>
            <span class="sr-only">Toggle details for order ORD-102</span>
          </button>
        </td>
        <td><strong>ORD-102</strong></td>
        <td>Globex Corporation</td>
        <td>$340.00</td>
        <td><span class="status-badge status-pending">Pending</span></td>
      </tr>
      
      <tr id="detail-ord-102" class="detail-row" hidden>
        <td colspan="5">
          <div class="drawer-content">
            <h4 style="margin: 0 0 0.75rem 0; font-size: 0.95rem;">Itemized Receipt for ORD-102</h4>
            <table class="sub-table">
              <thead>
                <tr>
                  <th scope="col">Item Description</th>
                  <th scope="col">SKU</th>
                  <th scope="col">Qty</th>
                  <th scope="col">Unit Price</th>
                  <th scope="col">Line Total</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Wireless Barcode Scanner</td>
                  <td><code>SCN-WL-01</code></td>
                  <td>2</td>
                  <td>$170.00</td>
                  <td>$340.00</td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

table.addEventListener('click', (e) => {
      const button = e.target.closest('.toggle-button');
      if (!button) return;

const isExpanded = button.getAttribute('aria-expanded') === 'true';
      const targetId = button.getAttribute('aria-controls');
      const detailRow = document.getElementById(targetId);

if (!detailRow) return;

if (isExpanded) {
        button.setAttribute('aria-expanded', 'false');
        detailRow.hidden = true;
      } else {
        button.setAttribute('aria-expanded', 'true');
        detailRow.hidden = false;
      }
    });
  })();
</script>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

🏋️ Hands-On Exercise

🎯 The Challenge: Global Master Toggle ("Expand All" / "Collapse All")

Add a master toggle button in the table header or caption that:

Expands all closed rows when clicked if any row is collapsed.
Collapses all open rows if all rows are already expanded.
Synchronizes all aria-expanded and hidden properties across all buttons and detail rows.

Instructions:

Insert a <button id="global-toggle" type="button">Expand All</button> into the table caption.
Check if at least one row is collapsed (aria-expanded="false").
If yes, expand all rows and update the global button text to "Collapse All".
If no, collapse all rows and update text to "Expand All".

🏁 Starter Code Sandbox

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

STARTER CODE SANDBOX exercise.html

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

<script>
  const globalBtn = document.getElementById('global-toggle');
  
  globalBtn.addEventListener('click', () => {
    const buttons = Array.from(document.querySelectorAll('.toggle-button'));
    const shouldExpandAll = buttons.some(b => b.getAttribute('aria-expanded') === 'false');

    buttons.forEach(btn => {
      const targetId = btn.getAttribute('aria-controls');
      const detailRow = document.getElementById(targetId);

      btn.setAttribute('aria-expanded', String(shouldExpandAll));
      if (detailRow) detailRow.hidden = !shouldExpandAll;
    });

    globalBtn.textContent = shouldExpandAll ? 'Collapse All' : 'Expand All';
  });
</script>

Why this works:

Inspecting the collective state ensures predictable bulk operations.
Setting both aria-expanded and row.hidden across all items maintains complete synchronization between visual rendering and the Accessibility Tree.

⚠️ Common Pitfalls

Wrong colspan Count: If your master table has 5 columns and your detail row sets <td colspan="3">, the detail drawer will leave an ugly empty gap on the right and corrupt layout grids.
Nesting <tr> inside <tr>: HTML strictly forbids placing <tr> inside another <tr>. Always structure master and detail as sibling rows in <tbody>.
Missing Nested Table Headers: Omitting <th> and scope="col" inside nested sub-tables prevents screen reader users from understanding sub-table columns.
Forgetting hidden attribute reset: Without [hidden] { display: none !important; }, custom CSS rules on tr can prevent collapsed detail rows from hiding.

💡 Pro Tips

Lazy-Loaded Sub-Tables (AJAX on Expand): If detail data is expensive, fetch the sub-record JSON on the first toggle click, render the HTML template dynamically, and cache it on the DOM node.
Smooth Height Transitions with CSS Grid: HTML <tr> elements do not support CSS height transitions. Wrap inner drawer contents in a <div class="drawer-grid"> using grid-template-rows: 0fr to 1fr for 60 FPS accordion animations.
Keyboard Arrow Key Traversal: Enable ArrowRight to expand and ArrowLeft to collapse when focused on the master toggle button.

📌 Key Takeaways

Implement master-detail tables using sibling <tr> pairs inside <tbody> (<tr class="master"> followed by <tr class="detail">).
Span detail rows across all columns using <td colspan="N"> where $N$ matches total column count.
Connect buttons to collapsible rows using aria-expanded and aria-controls.
Use the native hidden attribute to remove collapsed detail content from visual layout and the Accessibility Tree.
Structure nested sub-tables with independent <thead> and <th> elements to preserve accessibility.
--

⭐ LEARN: HTML 🌟 ⚔️ QUIZ BATTLE ARENA // ACTIVE

? Question 1 / 3

Why cannot a child detail row be nested directly inside the parent `<tr>` element (e.g. `<tr><tr>...</tr></tr>`)?

Topic: HTML Fundamentals

? Question 2 / 3

What is the role of `aria-controls` on the accordion toggle button?

Topic: HTML Fundamentals

? Question 3 / 3

How should a detail row cell (`<td>`) be configured to span across a 6-column data table?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

2.1 The Two-Row Pairing Pattern

2.2 The colspan="100%" / Dynamic Colspan Rule

2.3 ARIA Accessibility Wireframe

2.4 Nested Tables & Accessibility Trees

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Global Master Toggle ("Expand All" / "Collapse All")

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Why cannot a child detail row be nested directly inside the parent <tr> element (e.g. <tr><tr>...</tr></tr>)?

What is the role of aria-controls on the accordion toggle button?

How should a detail row cell (<td>) be configured to span across a 6-column data table?

2.2 The `colspan="100%"` / Dynamic Colspan Rule

Why cannot a child detail row be nested directly inside the parent `<tr>` element (e.g. `<tr><tr>...</tr></tr>`)?

What is the role of `aria-controls` on the accordion toggle button?

How should a detail row cell (`<td>`) be configured to span across a 6-column data table?