HTML <col> Tag Tutorial - Usage, Syntax,
Attributes and Example

calender-iconPublished: 25 May 2025

clock-icon5-min read

printer-icon whatsapp-icon share-icon



close-button
HTML
Table of Contents

INTRODUCTION

The <col> element is used to define one or more column in a column-group. The column-group is specified by using <colgroup> element. This tag can only be used inside a <colgroup> tag, and that <colgroup> must not have a span attribute.

The <col> element allows you to apply styles or behaviors to entire columns of a table, instead of to each cell individually.


Syntax:: The <col> element is void element and is represented by single tag. 


<colgroup>
    <col span="Number" />
</colgroup>
Example: 

<table>
  <colgroup>
    <col span="1" style="background-color: greenyellow;">
    <col span="2" style="background-color: lightyellow;">
  </colgroup>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>USA</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>UK</td>
    </tr>
  </tbody>
</table>

Output:
Name Age Country
Alice 30 USA
Bob 25 UK

ATTRIBUTES

1. span

The span atribute Specifies how many columns in a row the <col> element spans. The value must be a whole number greater than zero, and if it's not set, the default is 1.

example:: In this example the <col> element spans 2 column. 


<colgroup>
    <col span="2" />
</colgroup>
Deprecated Attributes

The following attribute are Deprecated and is advised to not use them. They are mentioned just for reference for updating legacy code or for historical interest.

  • align
  • bgcolor
  • char
  • charoff
  • valign
  • width

Usage Guidelines

  • The col tag can only be used inside a <colgroup> tag, and that <colgroup> must not have a span attribute.
  • The element doesn't group columns — This is the role of the element.
  • Only a few CSS properties work with , they are background, border, visibility, width. Other properties like font-weight or text-align won't have any effect.

Frequently Asked Questions (FAQ)

How do I use the <col> tag to style table columns?
Only a few CSS properties work with col element, like:
  • background: You can give a background color to a column. But it only shows if nothing else (like rows or cells) has a solid background on top of it.
  • border: You can add borders, but they’ll only work if the table uses border-collapse: collapse.
  • visibility: If you set visibility: collapse, the entire column disappears and its space is removed — though other columns still size as if it was there.
  • width: Sets the smallest width the column should have (like min-width).