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 
<style>table{border-collapse:collapse}th,td{border:1px solid #cbd5e1;padding:6px 10px}</style>
<table>
  <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