The <col> Element
As defined in the HTML Living Standard, the <col> element represents one or more columns in the column group that is its parent. It is used to set visual and structural properties for table columns.
| Feature | Free Tier | Pro Tier |
|---|---|---|
| Accessibility Check | Manual | Automated |
<table>
<colgroup>
<col style="background-color: #eee">
<col span="2" class="highlight">
</colgroup>
...
</table>
View HTML Living Standard: The col element
Usage Rules & Attributes
- Void Element: The
<col>tag has no content and no closing tag. - The
spanAttribute: This attribute specifies the number of columns the<col>element spans. If omitted, the default value is 1. - Styling: While many CSS properties do not apply to
<col>, you can use it to setwidth,background,border, andvisibilityfor an entire column at once.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
While <col> is primarily a presentational tool, using it within a <colgroup> helps define the table's structural skeleton. This assists browser rendering engines in building a more predictable accessibility tree, especially in large or complex data tables.
Best Practices
- Separation of Concerns: Whenever possible, use CSS classes on
<col>elements rather than inline styles to maintain a clean SMACSS-based project structure. - Responsive Tables: Remember that column-based properties set via
<col>may behave unexpectedly if the table is forced into a vertical "stack" layout for mobile users. Always test responsiveness.
A11y Tip: Logical Layout
Do not use <col> properties to change the visual order of columns in a way that differs from the source code order. This creates a confusing experience for screen reader users who follow the DOM order.