📊 Chapter 17: Table Structure & Semantics

The colgroup and col Elements

Column-level formatting contexts, `span` attributes, W3C CSS property constraints, and high-performance column styling.

LEARNING OBJECTIVES ⌵

Define column groups and individual column formatting contexts using <colgroup> and <col>.
Utilize the span attribute to format multiple contiguous columns in a single declaration.
Understand the strict W3C CSS Table Module specification: Identify the only 4 CSS properties supported on <col> and <colgroup>.
Explain why CSS inheritance properties like color, font-size, and text-align fail on <col> elements due to DOM tree architecture.

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

Imagine opening Google Sheets or Microsoft Excel with a 10,000-row dataset. You want to highlight Column C ("Pro Pricing Plan") with a subtle blue background.

Do you select each of the 10,000 cells individually down the sheet and apply the background color? Of course not. You click the "C" column header at the very top, and the entire vertical column instantly turns blue.

  SPREADSHEET VERTICAL COLUMN SELECTION:
               Col A            Col B            Col C (Selected!)       Col D
          +---------------+---------------+=============================+---------------+
  Row 1   | Feature       | Starter       | PRO (Featured Plan)         | Enterprise    |
  Row 2   | Monthly Cost  | $19           | $49                         | $199          |
  Row 3   | Storage       | 50 GB         | 500 GB                      | Unlimited     |
  Row 4   | Support       | Community     | 24/7 Priority Support       | Dedicated Rep |
  Row ... | ...           | ...           | ...                         | ...           |
  Row 10k | SLA           | 99.0%         | 99.95%                      | 99.99%        |
          +---------------+---------------+=============================+---------------+

In HTML, table markup is inherently row-oriented (<tr> contains <td>). Without column helpers, formatting a column requires adding classes to hundreds of individual <td> cells.

The <colgroup> and <col> elements provide HTML with vertical column handles, allowing you to define column widths, background colors, and borders in one single line of code at the top of the table.

Technical Deep Dive & Specifications

WHATWG Placement & Syntax Rules

The <colgroup> element represents a group of one or more columns in the <table>.

                                    +-----------------------+
                                    |        <table>        |
                                    +-----------------------+
                                                |
                               +----------------+----------------+
                               |                                 |
                     +-------------------+             +-------------------+
                     |    <caption>      | (Optional)  |    <colgroup>     | (0 or more)
                     +-------------------+             +-------------------+
                                                                 |
                                                       +-------------------+
                                                       |       <col>       | (0 or more)
                                                       +-------------------+

DOM Hierarchy Rules:

Placement: Must appear after any optional <caption>, but before any <thead>, <tbody>, <tfoot>, or <tr> elements.
Two Mutually Exclusive Authoring Models for <colgroup>:
- Model A (Empty element with span): <colgroup span="3" class="metrics"></colgroup> (Cannot contain child <col> tags).
- Model B (Container of <col> children): <colgroup><col><col class="active"><col></colgroup> (The <colgroup> itself must NOT have a span attribute).
The <col> Element: A void element (self-closing, no end tag) representing one or more columns within a <colgroup>.

The Famous "4 Supported CSS Properties" Constraint

Many developers attempt to write:

/* ❌ THIS WILL FAIL SILENTLY! */
col.pro-plan {
  color: #2563eb;
  font-weight: bold;
  text-align: center;
  font-size: 1.2rem;
}

None of those styles will apply to the text inside the cells! Why?

The DOM Inheritance Architecture

In the DOM tree, a <td> cell is a child of <tr>, which is a child of <tbody>, which is a child of <table>. A <td> is NOT a DOM child of <col>!

  DOM INHERITANCE PATH (How CSS properties cascade):
  <table> ──► <tbody> ──► <tr> ──► <td> (Inherits color, font-size, text-align)
    ▲
    │
  <colgroup> ──► <col> (DOES NOT CASCADE TEXT PROPERTIES INTO <td>!)

According to the W3C CSS Table Module Level 3 specification, only four CSS properties are recognized on <col> and <colgroup>:

Supported Property	Behavior & Conditions
1. `background`	Sets background color/image for the entire column. (Renders below cell backgrounds in the table rendering stack).
2. `width`	Controls column track width (especially effective with `table-layout: fixed`).
3. `border`	Applies column borders, ONLY when `border-collapse: collapse` is set on the parent `<table>`.
4. `visibility`	When set to `visibility: collapse`, hides the entire column without causing table layout reflow.

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Line 16 (border-collapse: collapse): Crucial requirement. Column borders defined on <col> are only rendered when border-collapse: collapse is active on <table>.
Line 33–44 (col.col-featured): Demonstrates the valid CSS properties on <col>: width, background-color, and border-left/right. This styles the entire vertical "Enterprise Tier" column without writing a single class on any <td> cell.
Line 52–56 (<colgroup>): Placed right below <caption> and before <thead>. Contains three <col> definitions mapping directly to columns 1, 2, and 3.
Line 66–88 (<tbody>): The table body cells remain completely clean and semantic with zero styling classes.

Expected Browser Render Output

SYS: ACTIVE

HULL: 98%

CORE: STABLE

NET: ONLINE

HTML STARSHIP CODE TERMINAL playground.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SaaS Tier Matrix - Colgroup Showcase</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      padding: 2rem;
      background-color: #f8fafc;
    }
    .pricing-table {
      width: 100%;
      max-width: 850px;
      margin: 0 auto;
      border-collapse: collapse; /* Required for col borders! */
      background: #ffffff;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      overflow: hidden;
    }
    .pricing-table th, .pricing-table td {
      padding: 14px 18px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
    }
    .pricing-table thead th {
      background-color: #0f172a;
      color: #ffffff;
      font-size: 0.95rem;
    }

/* ================================================= */
    /* COLGROUP & COL STYLING (The 4 Supported Properties)*/
    /* ================================================= */
    col.col-features {
      width: 40%;
      background-color: #ffffff;
    }
    col.col-standard {
      width: 30%;
      background-color: #f8fafc;
    }
    col.col-featured {
      width: 30%;
      background-color: #eff6ff; /* Soft Blue highlight across ALL 50 rows */
      border-left: 2px solid #3b82f6;
      border-right: 2px solid #3b82f6;
    }
  </style>
</head>
<body>

<table class="pricing-table">
    <caption>Cloud Hosting Feature Comparison</caption>

<colgroup>
      <col class="col-features">
      <col class="col-standard">
      <col class="col-featured">
    </colgroup>

<thead>
      <tr>
        <th scope="col">Plan Capabilities</th>
        <th scope="col">Standard Tier</th>
        <th scope="col">Enterprise Tier ⭐</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Dedicated CPU Cores</td>
        <td>2 vCPU</td>
        <td>16 vCPU Dedicated</td>
      </tr>
      <tr>
        <td>High-Speed NVMe Storage</td>
        <td>50 GB</td>
        <td>1 TB RAID-10</td>
      </tr>
      <tr>
        <td>Global Edge CDN & DDoS</td>
        <td>Standard (50 PoPs)</td>
        <td>Enterprise (300+ PoPs)</td>
      </tr>
      <tr>
        <td>Automated Hourly Backups</td>
        <td>❌ Not Included</td>
        <td>✅ Included (30-day retention)</td>
      </tr>
      <tr>
        <td>24/7/365 Dedicated SLA</td>
        <td>99.9% Uptime</td>
        <td>99.99% Financial SLA</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

LIVE RENDER & DIAGNOSTICS CORE TEMP: 45°C

INSPECTING DOM: VALID

TAGS: SCANNING...

+------------------------------------+--------------------+-------------------------------+
| PLAN CAPABILITIES (Width: 40%)     | STANDARD TIER (30%)| ENTERPRISE TIER ⭐ (30% Blue) |  <- thead (#0f172a)
+------------------------------------+--------------------+-------------------------------+
| Dedicated CPU Cores                | 2 vCPU             | 16 vCPU Dedicated             |
| High-Speed NVMe Storage            | 50 GB              | 1 TB RAID-10                  |
| Global Edge CDN & DDoS             | Standard (50 PoPs) | Enterprise (300+ PoPs)        |  <- Blue Column Tint (#eff6ff)
| Automated Hourly Backups           | ❌ Not Included    | ✅ Included (30-day retention)|     with Blue Side Borders
| 24/7/365 Dedicated SLA             | 99.9% Uptime       | 99.99% Financial SLA          |
+------------------------------------+--------------------+-------------------------------+

🏋️ Hands-On Exercise

🎯 The Challenge: Architect a 5-Column High-Performance Financial Matrix

Scenario: You are building a high-volume financial trade monitor with 5 columns. Adding classes to thousands of <td> rows causes severe DOM rendering overhead. You must style column widths and background bands using <colgroup> and <col> elements.

Requirements:

Insert a <colgroup> at the top of the table.
Structure the <colgroup> with:
- <col> for Column 1 (Symbol): Width 15%, neutral background.
- <col span="2"> for Columns 2 & 3 (Buy Price & Sell Price): Width 20% each, styled with a soft green background tint (#f0fdf4).
- <col span="2"> for Columns 4 & 5 (24h Volume & Market Cap): Width 22.5% each, styled with a soft slate background tint (#f8fafc).
Ensure border-collapse: collapse is applied to the table.
Add 3 data rows in <tbody> with clean markup (no inline styling on <td> cells).

🏁 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...

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Trade Execution Matrix</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 24px;
      background: #0f172a;
      color: #334155;
    }
    .trade-table {
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      border-collapse: collapse;
      background: #ffffff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
    }
    .trade-table caption {
      caption-side: top;
      font-size: 1.1rem;
      font-weight: bold;
      color: #f8fafc;
      padding: 12px;
      text-align: left;
    }
    .trade-table th, .trade-table td {
      padding: 12px 14px;
      border-bottom: 1px solid #e2e8f0;
    }
    .trade-table thead th {
      background-color: #1e293b;
      color: #ffffff;
      font-size: 0.85rem;
      text-transform: uppercase;
    }
    
    /* Column Group Styles */
    .col-symbol {
      width: 15%;
      background-color: #ffffff;
    }
    .col-pricing {
      width: 20%;
      background-color: #f0fdf4; /* Soft Green tint for Bid/Ask */
    }
    .col-volume {
      width: 22.5%;
      background-color: #f8fafc; /* Neutral Slate tint */
    }
    .num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
  </style>
</head>
<body>

  <table class="trade-table">
    <caption>Real-Time Equities Order Book</caption>

    <!-- High-Performance Column Declarations (Total 1 + 2 + 2 = 5 cols) -->
    <colgroup>
      <col class="col-symbol">
      <col span="2" class="col-pricing">
      <col span="2" class="col-volume">
    </colgroup>

    <thead>
      <tr>
        <th scope="col">Symbol</th>
        <th scope="col" class="num">Bid Price ($)</th>
        <th scope="col" class="num">Ask Price ($)</th>
        <th scope="col" class="num">24h Volume</th>
        <th scope="col" class="num">Market Cap</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><strong>NVDA</strong></td>
        <td class="num">$138.25</td>
        <td class="num">$138.28</td>
        <td class="num">48.2M</td>
        <td class="num">$3.41T</td>
      </tr>
      <tr>
        <td><strong>AAPL</strong></td>
        <td class="num">$232.10</td>
        <td class="num">$232.14</td>
        <td class="num">35.6M</td>
        <td class="num">$3.52T</td>
      </tr>
      <tr>
        <td><strong>MSFT</strong></td>
        <td class="num">$428.50</td>
        <td class="num">$428.55</td>
        <td class="num">21.8M</td>
        <td class="num">$3.18T</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Why this works:

Using <col span="2"> applies identical widths and background styling to pairs of columns in a single HTML declaration.
<td> cells require zero styling classes, drastically reducing HTML payload size and improving rendering performance for streaming financial tables.

⚠️ Common Pitfalls

Trying to Style Typography on <col>: Writing col { font-family: monospace; text-align: right; } has zero effect. In the CSS box model, text properties cascade from <tr> to <td>, not from <col>.
Mixing <col> Tags Inside a <colgroup span="...">: A <colgroup> with a span attribute cannot have child <col> tags. Choose one model or the other.
Applying Borders Without border-collapse: collapse: Column borders set on <col> will NOT render in border-collapse: separate mode. Always use border-collapse: collapse;.

💡 Pro Tips

High-Speed Dynamic Column Hiding (visibility: collapse): When implementing a "Hide Column" feature in a data grid with 10,000 rows, setting col.style.visibility = 'collapse' instantly hides the column across all 10,000 rows in $O(1)$ time without iterating over individual <td> cells or triggering expensive layout reflows.
Fixed Layout Performance (table-layout: fixed): Combine <colgroup> with table-layout: fixed; on <table>. The browser calculates column geometry immediately after parsing the <colgroup>, rendering rows instantaneously without waiting for all table contents to download.

📌 Key Takeaways

The <colgroup> and <col> elements define vertical column formatting contexts in HTML tables.
<colgroup> must appear before <thead>, <tbody>, <tfoot>, and <tr>.
The span attribute on <col> or <colgroup> applies styles across multiple contiguous columns.
Only 4 CSS properties are supported on <col>: border, background, width, and visibility.
Text properties (color, font-size, text-align) do NOT inherit from <col> because <td> is not a child of <col> in the DOM tree.
--

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

? Question 1 / 3

Which of the following CSS properties will successfully apply to table data cells when declared on a `<col>` element?

Topic: HTML Fundamentals

? Question 2 / 3

What is the primary performance benefit of using `visibility: collapse` on a `<col>` element to hide a table column?

Topic: HTML Fundamentals

? Question 3 / 3

Which of the following is valid HTML according to the WHATWG specification?

Topic: HTML Fundamentals

👨‍🚀 CADET FLIGHT DOSSIER

CADET EXPLORER

📖 The Mental Model & Story (Intuitive Foundation)

Technical Deep Dive & Specifications

WHATWG Placement & Syntax Rules

DOM Hierarchy Rules:

The Famous "4 Supported CSS Properties" Constraint

The DOM Inheritance Architecture

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

Expected Browser Render Output

🏋️ Hands-On Exercise

🎯 The Challenge: Architect a 5-Column High-Performance Financial Matrix

🏁 Starter Code Sandbox

⚠️ Common Pitfalls

💡 Pro Tips

📌 Key Takeaways

Which of the following CSS properties will successfully apply to table data cells when declared on a <col> element?

What is the primary performance benefit of using visibility: collapse on a <col> element to hide a table column?

Which of the following is valid HTML according to the WHATWG specification?

Which of the following CSS properties will successfully apply to table data cells when declared on a `<col>` element?

What is the primary performance benefit of using `visibility: collapse` on a `<col>` element to hide a table column?