col HTML Tag for Table Colgroups

The col HTML tags set column properties for each column within a colgroup element. It's used to set HTML table cell background color and width for entire columns, without repeating the styles for each individual cell.

col tag Syntax

The col tags are listed between the opening <colgroup> and closing </colgroup> elements at the beginning of the HTML tables. It's usually a list of col definitions, that covers the width of the table.

<table>
    <colgroup>
        <col class="name" span="2">
        <col>
        <col style="background:blue">
    </colgroup>
  ...

Defining a colgroup is not mandatory for every HTML table. Without individual col styles the whole table will have uniform cells.

Col is a singleton HTML tag and it doesn't require a closing </col> tag and the closing slash can also be removed: <col ... />

col Tag Attributes

We can assign global HTML attributes to our col tags, such as onclick, id, data-*, lang etc. The most important and frequently used tag attributes are listed below:

1. span – <col span="2">
   it takes a number that sets the width of the column group. Default is 1.
2. class – <col class="className">
   styles are often passed to table columns through the class global attribute.
3. style – <col style="background:blue">
   passes the inline style to the whole column.
4. width – <col width="100">
   the width of the column in pixels (written with or without the px) or in percent %.
5. align – not supported by newer browsers

<table>
    <colgroup>
      <col style="background:lightBlue">
      <col width="50%">
      <col class="brick" span="2">
    </colgroup>
  <tbody>
    <tr>
      <td>AA</td><td>BB</td>
      <td>CC</td><td>DD</td>
    </tr>
    <tr>
      <td>EE</td><td>FF</td>
      <td>GG</td><td>HH</td>
    </tr>
  </tbody>
</table>

col HTML Tag Examples

Using rowspan and colspan in a table with columns. The cell marked with "9" has colspan set to 2. Notice that the color of this cell is set by the column style where it starts on the left.

<table>
  <colgroup>
    <col style="background:FloralWhite">
    <col style="background:AliceBlue" span="3">
    <col style="background:Khaki">
  </colgroup>
  <tbody><tr>
    <td>1</td><td>2</td><td>3</td>
    <td>4</td><td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td rowspan="2">7</td>
    <td>8</td>
    <td colspan="2">9</td>
  </tr>
  <tr>
    <td>10</td><td>11</td><td>12</td>
    <td>13</td>
  </tr>
</tbody>
</table>

Td Styles Overwrite Col Styles

The styles of individual cells overwrites the background color set by the col tags.

"U" cell has a class assigned, and the "I" cell has an inline style.

Table Column Styling Without Using Col Tags

Instead of using col tags we can easily reproduce the same effect using CSS styles, targetting the columns with the td:nth-child(x) CSS pseudo class.

An important advantage of using this approach is that we can change not just the background color and width, but other CSS rules, such as font-weight, text color and others.

<table class="rainbowTable">
  <tbody>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
    </tr>
    <tr>
      <td>DD</td>
      <td>EE</td>
      <td>FF</td>
    </tr>
  </tbody>
</table>

Column Styling In Div Tables

We can achieve the colgroup/col effect in Div tables using the CSS nth-child CSS attributes, as demonstrated for tables under the previous heading.

<div class="divTable rainbowTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">AA</div>
      <div class="divTableCell">BB</div>
      <div class="divTableCell">CC</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">DD</div>
      <div class="divTableCell">EE</div>
      <div class="divTableCell">FF</div>
    </div>
  </div>
</div>

col Tags Generator

The online HTML table generator, available on the home page of this website creates the table cells, but there's no option to add col tags to the source. You can add colgroup and col tags manually in the syntax highlighted source editor.

Use the template below to copy-paste the markup.