col

The col element defines properties for a single column or a span of columns within a colgroup. It allows fine-grained control over column widths and styles.

Description

The <col> element is a void element (self-closing) that must be placed inside a <colgroup> element. It represents one or more columns in the table and allows you to apply styles to all cells in that column without repeating styles on each cell.

This element is particularly useful for setting consistent column widths and applying background colors to entire columns.

When to Use

  • Fixed column widths: Set specific widths for columns that should not auto-size
  • Column highlighting: Apply background colors to draw attention to specific columns
  • Proportional sizing: Define percentage-based widths for responsive tables
  • Multiple columns: Use span to apply the same properties to several columns

Basic Example

Define individual column properties within a colgroup.

Team Schedule
Date Task Status
2024-01-15 Design review meeting Complete
2024-01-16 Development sprint planning In Progress
2024-01-17 Client presentation Scheduled
<table> <caption>Team Schedule</caption> <colgroup> <col style="width: 150px;" /> <col style="width: auto;" /> <col style="width: 100px;" /> </colgroup> <thead> <!-- Headers --> </thead> <tbody> <!-- Data rows --> </tbody> </table>

Using the span Attribute

The span attribute applies the same properties to multiple consecutive columns.

Quarterly Results
Metric Q1 Q2 Q3 Q4
Revenue $150K $175K $200K $225K
Expenses $90K $95K $110K $120K
<colgroup> <col style="width: 25%;" /> <col span="4" style="width: 18.75%;" /> </colgroup>

Column Highlighting

Use background colors to highlight specific columns of importance.

Price Comparison (Recommended plan highlighted)
Feature Starter Professional Enterprise
Price/month $9 $29 $99
Projects 3 Unlimited Unlimited
Team members 1 10 Unlimited
Storage 5 GB 50 GB 500 GB
<colgroup> <col /> <col /> <col style="background: oklch(95% 0.05 140);" /> <col /> </colgroup>

Attributes

Attribute Value Description
span Positive integer (default: 1) Number of consecutive columns this element spans

Styling Limitations

Like <colgroup>, the <col> element has limited CSS support:

  • Supported: background, width, border (with collapsed borders), visibility: collapse
  • Not supported: padding, text-align, color, font properties

For unsupported properties, target cells directly:

/* Using CSS to style cells in a column */ table td:nth-child(3), table th:nth-child(3) { text-align: end; font-weight: bold; }

Or use the data-numeric attribute for right-aligned numeric columns:

<th scope="col" data-numeric>Amount</th> <td data-numeric>$1,234.56</td>

Accessibility

  • Decorative element: The <col> element is primarily for styling and does not convey semantic meaning
  • Header associations: Proper column relationships are established through <th scope="col">, not through <col>
  • Color contrast: If using background colors, ensure text remains readable with sufficient contrast

Related Elements

  • <colgroup> - Parent container for col elements
  • <table> - The table container
  • <th> - Column headers that provide semantic meaning
  • <td> - Data cells within columns