colgroup
A group of column definitions inside a table.
Platform under construction
Table Colgroup
Learn Table Colgroup with practical examples for tables, lists, structured data relationships, accessibility, SEO and live practice.
HTML data structures
Colgroup gives columns a shared styling hook without repeating classes on every cell.
The colgroup and col elements describe columns before the table rows begin. They are most useful when a whole column needs the same styling.
Colgroup does not replace table headers. Headers explain meaning. Colgroup gives column-level structure for presentation.
Use it when a column needs consistent width, background or emphasis across many rows.
col
A single column styling hook.
span
Lets one col definition apply to multiple columns.
column styling
Useful for width, background and repeated emphasis.
Syntax and structure
Place colgroup before table rows.
A colgroup belongs after caption and before thead, tbody or tr content.
Column styling hook
<table>
<caption>Package comparison</caption>
<colgroup>
<col class="feature-column">
<col span="2" class="price-column">
</colgroup>
<tr><th scope="col">Feature</th><th scope="col">Basic</th><th scope="col">Pro</th></tr>
<tr><th scope="row">Support</th><td>Email</td><td>Priority</td></tr>
</table>
Repeated classes on every cell
<tr> <td class="price-column">EUR 75</td> <td class="price-column">EUR 95</td> <td class="price-column">EUR 120</td> </tr>
Rules that matter
Data HTML should preserve relationships, not only appearance.
Tables and lists are small elements with big structural value. They help users scan, compare, follow steps and understand how pieces of information belong together.
Use for column styling
Colgroup is useful when a whole column needs a repeated visual treatment.
Do not skip headers
Colgroup is not a semantic replacement for th.
Keep support realistic
Not every CSS property behaves the same on col elements.
Use span carefully
span="2" is clean when adjacent columns share the same style.
Prefer clarity
If colgroup makes the table harder to read, classes on cells may be better.
Place it correctly
Put caption first, then colgroup, then table sections or rows.
Production thinking
Structured data markup affects accessibility, SEO and maintainability.
Why does this matter?
This matters because repeated classes across dozens of cells are easy to mistype. Colgroup can keep column-level styling centralized.
Accessibility
Colgroup is mainly structural and presentational. Screen reader clarity still comes from caption and headers.
Production note
Colgroup can reduce repeated markup in large comparison tables, but test the exact styling you expect in browsers.
SEO note
Column styling does not create meaning for search engines. Use clear headers and text content for meaning.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Move the featured-column class to another col.
- Use span="2" to style two adjacent columns.
- Add a caption that explains why one column is highlighted.
Practice assignment
Do this before moving to the next lesson.
- Create a comparison table with three columns.
- Use colgroup to style one column.
- Keep th headers in place for meaning.
Try it yourself
Highlight one table column
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?