HTML col Tag - Learn HTML

The <col> tag defines the properties of one or more columns in the HTML table defined by the <table> tag. It lets you target whole columns at once instead of styling every individual <td> cell. The <col> tag is almost always used inside the <colgroup> tag, which wraps one or more columns that share common properties.

The <col> tag is placed inside the <table> tag, before the <thead>, <tbody>, <tfoot> and <tr> tags, and after the <caption> tag if it is used (in the <caption> tag we insert the name of the table).

Why use `<col>`?

A table cell renders at the intersection of a row and a column, but HTML's structure is row-first: <tr> groups cells horizontally, and there is no row-by-row element that groups cells vertically. The <col> element fills that gap. Instead of adding the same width, background-color, or border to every <td> in a column, you declare it once on a <col>, and the browser applies it down the whole column.

This is most useful when you want to:

Give a column a fixed or proportional width (for example, make the first column narrow and the last column wide).
Highlight a column with a background color to draw the reader's eye.
Apply a border to a column to visually separate it.

Keep in mind one limitation up front: a <col> element itself does not contain content and cannot be styled freely. Browsers only apply a small set of CSS properties through <col> — background, border, width, and visibility. Properties such as padding, color, or font-size are ignored on <col>; for those you must style the <td>/<th> cells directly.

Syntax

The <col> tag is empty, which means that the closing tag isn’t required. But in XHTML, the <col> tag must be self-closed (<col />). In modern HTML5, the closing slash is omitted (<col>).

Example of the HTML `<col>` tag:

HTML <col> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Try it Yourself »

Result

The `span` attribute

The span attribute tells one <col> element to cover several consecutive columns. This avoids repeating the same <col> for adjacent columns that should look identical. The value must be a positive integer; the default is 1.

In the example below, a single <col span="3"> styles the first three columns at once, while a second <col> styles the fourth column on its own:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="3" style="background-color: #eee;" />
        <col style="background-color: #8ebf42;" />
      </colgroup>
      <tr>
        <th>Q1</th>
        <th>Q2</th>
        <th>Q3</th>
        <th>Total</th>
      </tr>
      <tr>
        <td>120</td>
        <td>98</td>
        <td>143</td>
        <td>361</td>
      </tr>
    </table>
  </body>
</html>

Styling columns with CSS

The align, valign, and width attributes are obsolete in HTML5 — they were removed from the specification, and you should not rely on them. The modern approach is to set widths and other supported properties with CSS instead of inline presentational attributes.

You can target a <col> directly, or give it a class and style that class. Because width is one of the properties that does apply through <col>, this works well:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid #666;
        padding: 4px 8px;
      }
      /* Style the column directly */
      col.label {
        width: 60%;
      }
      /* Or use the column index */
      col.value {
        width: 40%;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col class="label" />
        <col class="value" />
      </colgroup>
      <tr>
        <th>Product</th>
        <th>Price</th>
      </tr>
      <tr>
        <td>Keyboard</td>
        <td>$29</td>
      </tr>
      <tr>
        <td>Mouse</td>
        <td>$15</td>
      </tr>
    </table>
  </body>
</html>

Warning

Only a limited set of CSS properties take effect when applied to <col>: background, border, width, and visibility (for example visibility: collapse to hide a column). Properties like padding, color, text-align, and font-size are ignored on the column and must be set on the <td> or <th> cells instead.

Accessibility

The <col> and <colgroup> elements are purely presentational — they group columns visually but do not create a semantic relationship that screen readers announce. A screen reader navigates a table cell by cell using the row (<tr>) and the header (<th>) associations, not by column groups.

To make a data table understandable when read out of order:

Use proper <th> header cells with the scope attribute (scope="col" for column headers) so each data cell is tied to its heading.
Provide a <caption> to give the table a name.
Do not use background-color on a <col> as the only way to convey meaning (such as "valid" vs "invalid" columns), because color is invisible to screen-reader users and to people who cannot distinguish it. Pair it with text or an icon.

Attributes

Attribute	Value	Description
`span`	`number`	Sets the quantity of columns, the properties of which are determined by the `<col>` element. The number must be a positive integer. If the parameter is not specified, the default value is `1`.
`align`	`left`, `right`, `center`, `justify`, `char`	Sets the horizontal alignment of the column content. Obsolete in HTML5 — use the CSS `text-align` property on the `<td>`/`<th>` cells instead.
`char`	`character`	Aligns the column content to a character. Used only with `align="char"`. Obsolete in HTML5.
`charoff`	`number`	Offsets the content from the alignment character. Used only with `align="char"`. Obsolete in HTML5.
`valign`	`top`, `middle`, `bottom`, `baseline`	Aligns the content vertically. Obsolete in HTML5 — use the CSS `vertical-align` property on the cells instead.
`width`	`%`, `pixels`, `relative_length`	Sets the width of the column. Obsolete in HTML5 — use the CSS `width` property on the `<col>` (e.g. `col { width: 40%; }`) instead.

span is the only attribute still defined for <col> in HTML5. Everything that used to be done with align, valign, and width is now done with CSS, as shown in the "Styling columns with CSS" section above.

The <col> tag also supports the Global Attributes and the Event Attributes.

Practice

What does the HTML col tag do in a table?

It defines the properties of one or more columns inside a colgroup elementIt defines a head section of the HTML documentIt starts a new table rowIt directly styles the text and padding of each cell in a column

Why use <col>?