Path // www.yourhtmlsource.com → Reference → <COL> ELEMENT

<col> element

by Ross Shannon

The <col> element defines properties for one or more columns in a table. It’s a void element (no closing tag) that appears inside a <colgroup> element. While CSS can target columns through <col>, only a limited set of properties can be applied: background, border, width, and visibility.

Clock This page was last updated on 2025-11-17


Syntax

The col element is placed inside a colgroup and defines individual columns:

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
</table>

Note: The <col> element is a void element and does not have a closing tag.

Key Attributes

  • span — Specifies the number of consecutive columns this element applies to. Default is 1. Example: span="3" makes the col element apply to three columns.

The following attributes are obsolete:

  • align — Use CSS text-align on cells instead
  • valign — Use CSS vertical-align on cells instead
  • width — Use CSS width instead
  • char — Character for alignment
  • charoff — Offset for character alignment

CSS properties that work on col:

  • background and background-color
  • border (only when border-collapse: collapse is set on table)
  • width
  • visibility (only collapse value)

Examples

Basic Column Definitions

<table>
  <colgroup>
    <col style="width: 100px;">
    <col style="width: 200px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>001</td>
    <td>Product A</td>
    <td>Active</td>
  </tr>
</table>

Column Background Colors

<style>
  .highlight-col {
    background-color: #ffffcc;
  }
</style>

<table>
  <colgroup>
    <col>
    <col class="highlight-col">
    <col>
  </colgroup>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
  </tr>
  <tr>
    <td>$10,000</td>
    <td>$15,000</td>
    <td>$12,000</td>
  </tr>
</table>

Using Span Attribute

<table>
  <colgroup>
    <col style="width: 150px;">
    <col span="3" style="width: 100px; background-color: #f0f0f0;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Jan</th>
    <th>Feb</th>
    <th>Mar</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>85</td>
    <td>92</td>
    <td>88</td>
  </tr>
</table>

Hiding Columns

<style>
  .hidden-col {
    visibility: collapse;
  }
</style>

<table>
  <colgroup>
    <col>
    <col class="hidden-col">
    <col>
  </colgroup>
  <tr>
    <th>Visible</th>
    <th>Hidden</th>
    <th>Visible</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

When to Use

Use col for:

  • Setting consistent widths across all cells in a column
  • Applying background colors to entire columns
  • Defining column borders (with border-collapse)
  • Hiding columns with visibility: collapse

Limitations:

  • Most CSS properties don’t work on col elements (e.g., font, color, padding)
  • For text styling, you must target the actual cells (td, th)
  • Column styles have lower specificity than cell styles

Alternative approaches:

  • Use :nth-child() selectors on td/th elements for more control
  • Apply classes directly to cells for specific styling
  • Use JavaScript for dynamic column manipulation

While col provides some convenience for column-wide styling, modern CSS selectors often provide more flexibility and control over table appearance.

  • <colgroup> — Column group (parent element)
  • <table> — Table container
  • <td> — Table data cell
  • <th> — Table header cell