How to Use the col Element

The col element lets you set up one or more columns in a table. For example, you can give two plan columns the same background color.

The short answer

A small example

<style>
  .plan-columns {
    background-color: #eaf3ff;
  }
</style>

<table>
  <caption>Monthly plan prices</caption>
  <colgroup>
    <col>
    <col class="plan-columns" span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Basic</th>
      <th scope="col">Plus</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monthly price</th><td>$5</td><td>$9</td></tr>
  </tbody>
</table>

The first col represents one column. The next represents two because it has span="2". CSS gives those columns a blue background. The headings and prices are written in th and td cells.

col and colgroup

• colgroup is a container for a group of columns.
• col represents one or more columns inside that group.
• Without span, a col represents one column.
• col has no content, so HTML does not use an end tag for it.

To set only the number of columns in a group, you can leave out child col elements and put span on colgroup. To set up columns one by one, put span on each col. Do not use both methods on the same group.

About column styles

col does not wrap the table cells. Also, not every CSS setting applies to a column. If a column background is hidden, check whether the cells or row have their own background. See the Atlas page for details about column widths and other CSS rules.

Common mistakes

• Writing text such as “Price” in col. Put column headings inside th.
• Writing an end tag such as </col>. HTML does not have an end tag for col.
• Putting col outside colgroup. In valid HTML, put it inside a table's colgroup.
• Expecting col to create data cells. Write data in td or th inside a tr.

Related pages

See the table element for the whole table, colgroup for the column-group container, and th for column headings. For specification details and measurements, see the col Topic in Yugien Atlas.