col

The HTML <col> element represents one or more columns in a table so that column-level presentation settings can be grouped with colgroup.

Basic syntax

<table>
  <colgroup>
    <col class="name-column">
    <col span="2" class="score-columns">
  </colgroup>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

A col element is placed inside colgroup, before the table’s row groups. It does not contain cells and does not add content to the table.

Using span

The span attribute says how many consecutive columns the element represents. If it is omitted, the element represents one column.

<colgroup>
  <col span="2" style="background: #f4f4f4">
</colgroup>

Presentation, not meaning

Use col for column-level presentation that the browser supports. It does not name a column, create a header, or associate data cells with a heading. Use th and appropriate table structure for meaning and accessibility.

For many layout choices, CSS on a class or the table itself is clearer. Do not use col as a replacement for a responsive table design.

Common mistakes

• Putting col directly under table instead of inside colgroup.
• Expecting col to provide visible text or a header label.
• Using it to create relationships that belong to th, scope, or header associations.
• Assuming every CSS property affects an entire column through col.

Related pages

• caption: describe a table
• table: mark up tabular data
• class: group elements for CSS
• HTML reference index