References

Beginner-friendly references for web development, with live, editable examples.

The HTML <col> tag

Element All modern browsers Updated
Quick answer

The HTML <col> element represents a column (or, with span, several columns) inside a <colgroup>, so you can apply shared styling to whole columns. It is a void element.

Overview

The <col> element lets you target entire table columns for styling without adding a class to every cell. It lives inside a <colgroup> at the top of the table, and its span attribute makes one <col> cover several columns at once.

There is a catch worth knowing: only a limited set of CSS properties apply through columns — chiefly background, width, border and visibility. Text color, padding and alignment, for example, must still be set on the cells themselves. It is a void element, like its sibling <br>.

Syntax

<colgroup>
  <col style="background:#eef;">
  <col span="2">
</colgroup>

Attributes

The <col> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
span A positive integer (default 1). Spans a col/colgroup across columns.

Example

Live example 
<table border="1">
  <colgroup><col style="background:#eef5ff;"><col></colgroup>
  <tr><td>Highlighted</td><td>Plain</td></tr>
</table>

Best practices

  • Use <col> to apply column-wide background, width or borders without per-cell classes.
  • Place <col> elements inside a <colgroup> at the top of the table.
  • Use the span attribute to cover several columns with one <col>.
  • Set text color, padding and alignment on the cells — those do not apply through columns.

Frequently asked questions

What is the col element?
It targets one or more table columns for styling, sitting inside a <colgroup>.
How do I style a whole table column?
Define a <col> in a <colgroup> and set properties like background or width on it.
What CSS properties work on a col?
Only a limited set — mainly background, width, border and visibility.
What is the difference between col and colgroup?
A <colgroup> wraps the column definitions; each <col> represents one or more columns within it.
code colgroup