Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
col
Defines properties for a single column or a span of columns within a colgroup. Use it to set column widths, apply background colors, or highlight specific columns in a table.
Description
The <col> element is a void element (self-closing) that must be placed inside a <colgroup>. It represents one or more columns in the table and allows you to apply styles to all cells in those columns without repeating attributes on each cell.
The most common uses are setting consistent column widths and applying background colors to entire columns for visual grouping or emphasis.
When to Use
- Fixed column widths: set specific widths for columns that should not auto-size
- Proportional sizing: define percentage-based widths for responsive tables
- Column highlighting: apply background colors to draw attention to specific columns
- Spanning multiple columns: use
spanto apply the same properties to several consecutive columns
Examples
This demo shows alternating column backgrounds applied through individual <col> elements, creating a striped column effect that helps users track data vertically.
Col elements with background highlighting
<table> <caption>Team Schedule</caption> <colgroup> <col /> <col style="background: oklch(from var(--color-interactive) l c h / 0.05);" /> <col /> <col style="background: oklch(from var(--color-interactive) l c h / 0.05);" /> </colgroup> <thead> <tr> <th scope="col">Name</th> <th scope="col">Monday</th> <th scope="col">Tuesday</th> <th scope="col">Wednesday</th> </tr> </thead> <tbody> <tr> <td>Alice</td><td>9am-5pm</td><td>Remote</td><td>9am-5pm</td> </tr> <!-- More rows... --> </tbody></table>The span Attribute
The span attribute applies the same properties to multiple consecutive columns from a single <col> element, avoiding repetition.
Col with span attribute
<colgroup> <col style="width: 25%;" /> <col span="4" style="width: 18.75%;" /></colgroup><!-- First col covers 1 column at 25% width, second col covers 4 columns each at 18.75% -->| Attribute | Value | Description |
|---|---|---|
span |
Positive integer (default: 1) | Number of consecutive columns this element covers |
Column Widths
Set fixed pixel widths, percentages, or auto to control column sizing.
Fixed and auto column widths
<colgroup> <col style="width: 150px;" /> <col style="width: auto;" /> <col style="width: 100px;" /></colgroup><!-- Fixed-auto-fixed column layout -->Column Highlighting
Apply a subtle background to draw attention to a specific column, such as a recommended option in a comparison table.
Highlighting a single column
<colgroup> <col /> <col /> <col style="background: oklch(95% 0.05 140);" /> <col /></colgroup><!-- Third column highlighted -->Styling Limitations
The CSS specification restricts which properties work on <col> elements.
- Supported:
background,width,border(with collapsed borders),visibility: collapse - Not supported:
padding,text-align,color,fontproperties
For unsupported properties, target cells directly with CSS selectors or use VB's data-numeric attribute for right-aligned numeric columns.
Targeting cells when col properties are limited
/* When col doesn't support the property you need, target cells directly: */td:nth-child(3),th:nth-child(3) { text-align: end; font-weight: bold;} /* Or use VB's data-numeric attribute for right-aligned numeric columns: *//* th data-numericAmount</th> <td data-numeric>$1,234.56</td> */Accessibility
- Presentational element:
<col>is primarily for styling and does not convey semantic meaning to assistive technologies - Header associations: proper column semantics come from
<th scope="col">, not from<col> - Color contrast: when using background colors, ensure text remains readable with sufficient contrast
Related
<colgroup>- parent container for col elements<table>- the table container; seedata-numericfor VB's built-in right-alignment<th>- column headers that provide semantic meaning<td>- data cells within columns