← Back to All Tags

<col>

Specifies column properties for each column within a <colgroup>

Standard HTML Void Element

Definition and Usage

The <col> element specifies column properties for each column within a <colgroup> element. It is used to apply styles or other properties to entire table columns without having to repeat the styles for each cell.

The <col> tag is a void element (self-closing), meaning it does not have a closing tag. It must be used inside a <colgroup> element and must appear after any <caption> element and before any table rows.

Tip: The <col> tag is useful when you want to apply styles to entire columns rather than repeating styles for each cell.
Best Practice: Use the <col> tag within <colgroup> for better organization and easier maintenance of column styling.

Browser Support

The <col> tag is supported in all major browsers:

Chrome
Chrome
Yes
Firefox
Firefox
Yes
Safari
Safari
Yes
Edge
Edge
Yes
Opera
Opera
Yes

Attributes

The <col> tag supports the following specific attributes in addition to HTML global attributes:

Attribute Value Description
span number Specifies the number of columns the <col> element should span
style CSS styles Specifies inline CSS styles for the column(s)

Examples

Basic Column Styling

Applying background color to a single column:

Example

<table>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col style="background-color: #e0e0e0;">
    <col style="background-color: #d0d0d0;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
    <td>New York</td>
  </tr>
</table>

Spanning Columns

Using the span attribute to apply styles to multiple columns:

Example

<table>
  <colgroup>
    <col span="2" style="background-color: #ffe0e0;">
    <col style="background-color: #e0ffe0;">
  </colgroup>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Doe</td>
    <td>jane@example.com</td>
  </tr>
</table>

Multiple Columns

Styling different columns with different properties:

Example

<table border="1">
  <colgroup>
    <col style="background-color: #ffcccc; width: 150px;">
    <col style="background-color: #ccffcc; width: 100px;">
    <col style="background-color: #ccccff; width: 200px;">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Widget</td>
    <td>$19.99</td>
    <td>A useful widget</td>
  </tr>
  <tr>
    <td>Gadget</td>
    <td>$29.99</td>
    <td>An amazing gadget</td>
  </tr>
</table>

Width Control

Setting column widths:

Example

<table border="1" style="width: 100%;">
  <colgroup>
    <col style="width: 30%;">
    <col style="width: 20%;">
    <col style="width: 50%;">
  </colgroup>
  <tr>
    <th>Title</th>
    <th>Author</th>
    <th>Summary</th>
  </tr>
  <tr>
    <td>HTML Basics</td>
    <td>John Smith</td>
    <td>A comprehensive guide to HTML</td>
  </tr>
</table>

Background Colors

Creating alternating column colors:

Example

<table border="1">
  <colgroup>
    <col style="background-color: #f9f9f9;">
    <col style="background-color: var(--bg-primary);">
    <col style="background-color: #f9f9f9;">
    <col style="background-color: var(--bg-primary);">
  </colgroup>
  <tr>
    <th>Q1</th>
    <th>Q2</th>
    <th>Q3</th>
    <th>Q4</th>
  </tr>
  <tr>
    <td>$1000</td>
    <td>$1200</td>
    <td>$1500</td>
    <td>$1800</td>
  </tr>
</table>

Try it Yourself

Interactive Example

See how the <col> tag works with table columns:

Employee ID Department
Alice Johnson E001 Engineering
Bob Smith E002 Marketing
Carol White E003 Sales

How to Style Table Columns

The <col> tag accepts a limited set of CSS properties. Here are the properties that work reliably:

CSS Property Supported Notes
background-color Yes Sets the background color of the column
width Yes Sets the width of the column
visibility Yes Can hide a column (collapse)
border Limited Works only when border-collapse is collapse
color No Text color cannot be set on columns
font-family No Font properties cannot be set on columns
text-align No Text alignment cannot be set on columns

Limitations of Col Element

  • Limited CSS support: Only certain CSS properties work on <col> elements
  • No text styling: Cannot change font, color, or text alignment using <col>
  • Background limitations: Background images may not work consistently across browsers
  • Border behavior: Border styling only works reliably with border-collapse: collapse
  • Padding/margin: Padding and margin properties are not supported
  • Cell-level override: Individual cell styles will override column styles
  • Browser differences: Implementation varies slightly between browsers
  • Alternative needed: For complex styling, you may need to style individual cells or use CSS classes

Best Practices

  • Use inside colgroup: Always place <col> elements inside a <colgroup>
  • Self-closing syntax: Use <col> not <col></col>
  • Correct placement: Place <colgroup> after <caption> and before table rows
  • Match column count: Ensure the number of <col> elements matches table columns
  • Use span wisely: Use the span attribute to reduce repetitive code
  • Stick to supported properties: Only use CSS properties that are well-supported
  • Consider accessibility: Ensure sufficient color contrast for column backgrounds
  • Test across browsers: Verify that column styling works as expected in different browsers

Common Use Cases

Data Tables

Apply alternating colors to columns in data-heavy tables for better readability.

Financial Reports

Highlight specific columns (like totals) with background colors in financial tables.

Comparison Tables

Set different widths for columns to accommodate varying content lengths.

Schedules and Calendars

Style time period columns differently (weekends vs weekdays) in schedule tables.

Related Tags