Syntax
<table>
<colgroup>
<col style="background: #f3f4f6;">
<col span="2">
</colgroup>
<!-- table rows -->
</table>Examples
Styling a Single Column
Highlighting one column across every row.
<table>
<colgroup>
<col style="background: #fef3c7;">
<col>
<col>
</colgroup>
<tr><th>Name</th><th>Role</th><th>Status</th></tr>
<tr><td>Alice</td><td>Dev</td><td>Active</td></tr>
</table>Spanning Multiple Columns
Using the span attribute to apply a style across several columns at once.
<table>
<colgroup>
<col span="2" style="background: #e0f2fe;">
<col>
</colgroup>
<tr><th>Q1</th><th>Q2</th><th>Q3</th></tr>
</table>Attributes
- span (number): The number of columns the col/colgroup applies to
Best practices
- Use colgroup/col only for column-level styling like width or background, not for content
- Place colgroup immediately after the opening table tag, before thead/tbody
- For most styling needs, targeting cells directly with CSS (nth-child) is more flexible than col
- col elements are void (self-closing) and take no content
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<table>
The <table> element displays tabular data in rows and columns. A well-structured table uses <thead> for column headers, <tbody> for the main data, <tr> for each row, <th> for header cells, and <td> for regular data cells. Tables should only be used for genuinely tabular data — never for page layout, which is what CSS Grid and Flexbox are for.HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.HTML Forms
HTML forms are used to collect user input and send it to a server for processing. They contain interactive controls like text fields, checkboxes, radio buttons, and submit buttons. Forms are a fundamental part of web interactivity, enabling everything from login pages and search bars to complex data entry interfaces.<div>
The <div> element is a generic container used to group and organize content on a web page. It has no semantic meaning on its own but is essential for layout and styling. Think of it as a box that can hold other HTML elements. Divs are block-level elements, meaning they start on a new line and take up the full width available.
The <table> element displays tabular data in rows and columns. A well-structured table uses <thead> for column headers, <tbody> for the main data, <tr> for each row, <th> for header cells, and <td> for regular data cells. Tables should only be used for genuinely tabular data — never for page layout, which is what CSS Grid and Flexbox are for.HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.HTML Forms
HTML forms are used to collect user input and send it to a server for processing. They contain interactive controls like text fields, checkboxes, radio buttons, and submit buttons. Forms are a fundamental part of web interactivity, enabling everything from login pages and search bars to complex data entry interfaces.<div>
The <div> element is a generic container used to group and organize content on a web page. It has no semantic meaning on its own but is essential for layout and styling. Think of it as a box that can hold other HTML elements. Divs are block-level elements, meaning they start on a new line and take up the full width available.