REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<col>

AI & DATA SCIENCE // col-tag

The <col> element defines styling properties for one or more entire table columns, used inside a <colgroup>.

Syntax

<colgroup>
  <col style="background-color: #f0f0f0;">
  <col span="2">
</colgroup>

Deep Dive Course

**`<col>`** is a void element used inside `<colgroup>` to apply styling to a whole column at once (background color, width) without repeating a class on every single `<td>` in that column. The **`span`** attribute lets one `<col>` apply to several consecutive columns instead of writing one `<col>` per column. Only a limited set of CSS properties (mainly background and width/visibility-related ones) actually apply through `<col>` — most styling still needs to go directly on cells.

1Understanding <col>

`<col>` is a void element used inside <colgroup> to apply styling to a whole column at once (background color, width) without repeating a class on every single <td> in that column. The `span` attribute lets one <col> apply to several consecutive columns instead of writing one <col> per column. Only a limited set of CSS properties (mainly background and width/visibility-related ones) actually apply through <col> — most styling still needs to go directly on cells.

💡

Because only a narrow set of CSS properties work through <col> (mostly background-color and width), for anything beyond that, you'll still need :nth-child(n) selectors targeting the actual <td> cells in that column.

editor.html

<table>
  <colgroup>
    <col style="background-color: #eef;">
    <col>
  </colgroup>
  <tr><td>Highlighted column</td><td>Normal column</td></tr>
</table>

localhost:3000

2Practical Example

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

editor.html

<!-- One col spanning multiple columns -->
<colgroup>
  <col span="3" style="width: 100px;">
</colgroup>

localhost:3000

3Best Practices

Follow these guidelines when working with <col>:

1. Use <col>/<colgroup> to set a background color or width for an entire column efficiently

2. Use the span attribute to cover multiple identical columns with one <col>

3. Fall back to :nth-child CSS selectors on cells for styling properties <col> doesn't support

⚠️

Tip: Because only a narrow set of CSS properties work through <col> (mostly background-color and width), for anything beyond that, you'll still need :nth-child(n) selectors targeting the actual <td> cells in that column.

editor.html

<table>
  <colgroup>
    <col style="background-color: #eef;">
    <col>
  </colgroup>
  <tr><td>Highlighted column</td><td>Normal column</td></tr>
</table>

localhost:3000

Examples

Example 01Basic Usage

<table>
  <colgroup>
    <col style="background-color: #eef;">
    <col>
  </colgroup>
  <tr><td>Highlighted column</td><td>Normal column</td></tr>
</table>

Example 02Advanced Example

<!-- One col spanning multiple columns -->
<colgroup>
  <col span="3" style="width: 100px;">
</colgroup>

Best Practices

Use / to set a background color or width for an entire column efficiently
Use the span attribute to cover multiple identical columns with one
Fall back to :nth-child CSS selectors on cells for styling properties doesn't support

Interview Question

What kinds of CSS properties can actually be applied through a <col> element?▼

Hint: Think about why <col> can't be used for arbitrary styling like text color or borders.

Only a narrow set of CSS properties reliably apply through <col> in most browsers — primarily background-related properties and width — because a <col> doesn't correspond to a real rendered box the way a <td> does; it's more of a styling hint applied across the column's cells. Properties like text color, borders, or padding generally need to be set directly on the <td>/<th> cells themselves, often via :nth-child selectors when you want to target 'every cell in this column'.

Exercises

EasyPractice using <col> in a real scenario.

View Solution

<table>
  <colgroup>
    <col style="background-color: #eef;">
    <col>
  </colgroup>
  <tr><td>Highlighted column</td><td>Normal column</td></tr>
</table>

Frequently Asked Questions

What kinds of CSS properties can actually be applied through a <col> element?▼

Only a narrow set of CSS properties reliably apply through in most browsers — primarily background-related properties and width — because a doesn't correspond to a real rendered box the way a does; it's more of a styling hint applied across the column's cells. Properties like text color, borders, or padding generally need to be set directly on the / cells themselves, often via :nth-child selectors when you want to target 'every cell in this column'.

Related Functions

colgroup-tagtable-tag