HTML <col> Element

HTML <col> Element

The <col> element represents one or more columns within a table. It is placed inside a <colgroup> and can be used to apply certain properties to an entire column without repeating them on individual table cells.

Syntax

<colgroup>
  <col>
  <col>
</colgroup>

The <col> element is a void element. It does not contain content and does not use a closing tag. It is used as a child of a <colgroup> element that does not have a span attribute.

Attributes

The <col> element supports the global HTML attributes and the following element-specific attribute:

The value of span must be an integer greater than zero and no greater than 1000. When omitted, the element represents one column.

Example

The following example uses <col> elements to identify the columns of a table:

<table>
  <colgroup>
    <col>
    <col class="price">
  </colgroup>
  <thead>
    <tr>
      <th>Service</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Logo Design</td>
      <td>$250</td>
    </tr>
    <tr>
      <td>Business Cards</td>
      <td>$125</td>
    </tr>
  </tbody>
</table>

The first <col> represents the Service column and the second represents the Price column. The class on the second column provides a hook that can be used with CSS.

Try It Yourself

The example uses CSS with the <col> element to give the second table column a different background. Change the class to another column to see how the result changes.

Span Attribute

The span attribute allows one <col> element to represent several consecutive columns:

<colgroup>
  <col>
  <col span="2" class="numeric">
</colgroup>

In this example, the first <col> represents one column and the second represents the next two columns.

Usage Notes

A <col> element must be contained within a <colgroup> that does not have its own span attribute. The order of the <col> elements corresponds to the order of the table columns they represent.

The <col> element represents columns but does not contain the table's cells. The actual cell content remains inside <th> and <td> elements in the table rows.

Only certain CSS properties affect table columns through <col>. It should not be treated like a container that can apply every CSS property to the cells within a column.

Older attributes such as align, char, charoff, valign, and width are obsolete on <col>. Modern table presentation should be controlled with CSS.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

For detailed browser compatibility information, see Can I Use: HTML <col> Element .

Related Elements

<colgroup> - Represents a group of one or more columns within a table.

<table> - Represents tabular data arranged in rows and columns.

<td> - Represents a data cell within a table row.

<th> - Represents a header cell within a table row.

Specifications

HTML Living Standard: The <col> Element