REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<colgroup>

AI & DATA SCIENCE // colgroup-tag

The <colgroup> element groups one or more <col> elements together, defining column-level styling for a <table>.

Syntax

<table>
  <colgroup>
    <col>
    <col style="background-color: #eef;">
  </colgroup>
  <tr><td>A</td><td>B</td></tr>
</table>

Deep Dive Course

**`<colgroup>`** must appear right after `<caption>` (if present) and before `<thead>`/`<tr>` in a table, and it exists purely to hold `<col>` children (or, less commonly, a `span` attribute directly on the `<colgroup>` itself to cover multiple columns with shared styling in one declaration, without individual `<col>` children).

1Understanding <colgroup>

`<colgroup>` must appear right after <caption> (if present) and before <thead>/<tr> in a table, and it exists purely to hold <col> children (or, less commonly, a span attribute directly on the <colgroup> itself to cover multiple columns with shared styling in one declaration, without individual <col> children).

💡

If every column in the group shares identical styling, you can skip individual <col> children entirely and just put a span attribute directly on <colgroup> — e.g. <colgroup span="4" style="...">.

editor.html

<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
  </colgroup>
  <tr><td>Label</td><td>Longer value column</td></tr>
</table>

localhost:3000

2Practical Example

Here is a real-world application of <colgroup> showing how it is used in production HTML.

editor.html

<!-- Single colgroup with span, no individual col children -->
<table>
  <colgroup span="3" style="background-color: #f9f9f9;"></colgroup>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

localhost:3000

3Best Practices

Follow these guidelines when working with <colgroup>:

1. Place <colgroup> immediately after <caption> and before <thead>/<tr>

2. Use it to define shared column widths/backgrounds once, instead of repeating styles per cell

3. Use the span attribute directly on <colgroup> when all its columns share identical styling

⚠️

Tip: If every column in the group shares identical styling, you can skip individual <col> children entirely and just put a span attribute directly on <colgroup> — e.g. <colgroup span="4" style="...">.

editor.html

<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
  </colgroup>
  <tr><td>Label</td><td>Longer value column</td></tr>
</table>

localhost:3000

Examples

Example 01Basic Usage

<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
  </colgroup>
  <tr><td>Label</td><td>Longer value column</td></tr>
</table>

Example 02Advanced Example

<!-- Single colgroup with span, no individual col children -->
<table>
  <colgroup span="3" style="background-color: #f9f9f9;"></colgroup>
  <tr><td>A</td><td>B</td><td>C</td></tr>
</table>

Best Practices

Place immediately after and before /
Use it to define shared column widths/backgrounds once, instead of repeating styles per cell
Use the span attribute directly on when all its columns share identical styling

Interview Question

Where must <colgroup> appear within a <table>, and what happens if you place it elsewhere?▼

Hint: Think about the required order of a table's direct children.

<colgroup> must appear immediately after <caption> (or as the first child if there's no caption) and before any <thead>, <tbody>, <tfoot>, or <tr>. Table markup has a fairly strict required child order, and browsers' HTML parsers will typically just ignore or reposition a misplaced <colgroup>, meaning the column styling simply won't apply as intended if it's placed later in the table's markup.

Exercises

EasyPractice using <colgroup> in a real scenario.

View Solution

<table>
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 70%;">
  </colgroup>
  <tr><td>Label</td><td>Longer value column</td></tr>
</table>

Frequently Asked Questions

Where must <colgroup> appear within a <table>, and what happens if you place it elsewhere?▼

must appear immediately after (or as the first child if there's no caption) and before any , , , or . Table markup has a fairly strict required child order, and browsers' HTML parsers will typically just ignore or reposition a misplaced , meaning the column styling simply won't apply as intended if it's placed later in the table's markup.

Related Functions

col-tagtable-tag