Tables in HTML are row-oriented. You create rows <tr> and fill them with cells <td>. But what if you want to style an entire vertical column? Doing it cell by cell is tedious.

Let's start with a standard table. We have a header row and data rows. Currently, it has no specific column styling.

<table>
  <tr>
    <th>Item</th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
</table>

To style columns, we use the <colgroup> element. It must be placed immediately after the opening <table> tag and before any <thead> or <tr>.

<table>
  <colgroup>
  </colgroup>
  <tr>
    <th>Item</th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
</table>

Inside <colgroup>, we use the <col> tag. It is a self-closing void element. Each <col> represents one or more columns in the table.

<table>
  <colgroup>
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Item</th>
    <th>Cost</th>
  </tr>
...</table>

Here is the result. Notice how the entire first column 'Item' is now yellow, even though we didn't touch the <td> tags directly.

<table>
  <colgroup>
    <col style="background-color: #fef08a">
  </colgroup>
  <tr>
    <th>Item</th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$1</td>
  </tr>
</table>

Checkpoint: Where must the <colgroup> tag be placed?

<table>
  
  <thead>...</thead>
</table>

What if we want to apply the same style to multiple columns? We use the 'span' attribute. <col span='2'> will affect the next two columns.

<table>
  <colgroup>
    <col span="2" style="background-color: cyan">
  </colgroup>
  <tr>
    <th>A</th><th>B</th><th>C</th>
  </tr>
</table>

Using span keeps your code clean. Instead of repeating <col> tags, you group them efficiently.

<table>
  <colgroup>
    <col span="2" style="background-color: #a5f3fc">
  </colgroup>
  <tr>
    <th>A</th><th>B</th><th>C</th>
  </tr>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
</table>

Excellent! You now understand how to structure table columns semantically and visually.

<h1>Table Mastered!</h1>

Now it is your turn. Practice by building tables and defining column groups in the interactive challenges below.

colgroup.html

1 / 10

📊

Tutor:Tables in HTML are row-oriented. You create rows <tr> and fill them with cells <td>. But what if you want to style an entire vertical column? Doing it cell by cell is tedious.

⭐ 0 EXP

Column Mastery

Unlock nodes by learning table structures.

Concept 1: The Container

The <colgroup> element must be the first child of a <table>, before any rows.

System Check

Which element is the parent of <col>?

tablecolgrouptrthead

Community Holo-Net

Share Your Tables

Built a complex schedule or pricing table? Share your column styling tricks.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Colgroup and Column Styling

Pascual Vila

Frontend Instructor.

When working with tables, you often need to apply styles to an entire vertical column. Standard CSS makes this difficult because tables are row-based.

The Colgroup Element

The <colgroup> element is a container for defining column properties. It sits at the very top of your table structure, immediately after the opening <table> tag and before any rows or headers.

The Col Element

Inside the group, we use the empty <col> tag. This element doesn't hold content; instead, it represents the abstract column itself. You can target it with styles like `background-color` or `border`.

Spanning Multiple Columns

The most powerful feature is the span attribute. If you want three consecutive columns to share the same width or color, you don't need three tags. Just use <col span="3">.

Table Glossary

colgroup: A container tag used to group one or more columns in a table for formatting.
col: A void element that represents a column within a colgroup. It accepts attributes like `span` and `style`.
span: An attribute that specifies the number of consecutive columns a `col` element should extend across.

📖 INDEX