HTML Table Colgroup : Complete Guide to Grouping Table Columns

Learn how to use the HTML and elements to group, style, and control table columns with syntax, examples, attributes, CSS, best practices, and common mistakes.

By /

HTML Table Colgroup

The HTML <colgroup> element is used to group one or more columns in an HTML table. It is especially useful when you want to apply common styles or properties to several table columns without adding the same styling to every individual cell.

For example, suppose a table has five columns and you want the first two columns to have a different background color. Instead of styling every <th> and <td> separately, you can use <colgroup> with <col> elements.

The <colgroup> element works together with the <col> element. The <col> element represents one or more columns inside a table and allows you to apply certain column-level styling.

Basic Syntax of <colgroup>

The basic structure looks like this:

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>

  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
  </tr>
</table>

The <colgroup> should normally appear after the opening <table> tag and before the table’s row content.

Why Use <colgroup>?

Without <colgroup>, you may need to style individual table cells repeatedly.

For example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
    <td>Delhi</td>
  </tr>
</table>

If you want to give the Name and Age columns the same appearance, you could style many individual cells.

With <colgroup>, the column structure becomes easier to manage:

<table>
  <colgroup>
    <col style="background-color: #f2f2f2;">
    <col style="background-color: #f2f2f2;">
    <col>
  </colgroup>

  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
    <td>Delhi</td>
  </tr>
</table>

Here, the first two columns are grouped visually through the <colgroup> structure.

HTML <colgroup> and <col>

These two elements are closely related, but they have different jobs.

  • <colgroup> defines a group of columns.
  • <col> represents individual columns or a range of columns within that group.
  • <colgroup> provides the container.
  • <col> allows you to target specific columns.

A simple example is:

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
</table>

There are three <col> elements, representing the three table columns.

Styling Columns with <colgroup>

One of the most common uses of <colgroup> is applying CSS to columns.

<table>
  <colgroup>
    <col style="background-color: lightblue;">
    <col style="background-color: lightyellow;">
    <col style="background-color: lightgreen;">
  </colgroup>

  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Availability</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$800</td>
    <td>Available</td>
  </tr>
</table>

Each column receives a different background color.

However, it is important to understand that not every CSS property works on <col> elements. Column elements have special rendering behavior, and browsers mainly support properties such as background, border in certain circumstances, visibility, and some sizing-related properties. For general typography and layout, styling the cells themselves is often more reliable.

Using CSS with <colgroup>

Instead of inline styles, CSS can be used for cleaner code.

<style>
  .product-column {
    background-color: #f5f5f5;
  }

  .price-column {
    background-color: #fff3cd;
  }
</style>

<table>
  <colgroup>
    <col class="product-column">
    <col class="price-column">
    <col>
  </colgroup>

  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td>$800</td>
    <td>Available</td>
  </tr>
</table>

This approach is easier to maintain when a website contains many tables.

Using the span Attribute

The <col> element has a span attribute that lets one <col> element represent multiple consecutive columns.

For example:

<table>
  <colgroup>
    <col span="2" style="background-color: #eeeeee;">
    <col style="background-color: #dddddd;">
  </colgroup>

  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Rahul</td>
    <td>25</td>
    <td>Delhi</td>
  </tr>
</table>

Here:

<col span="2">

means that the <col> applies to two consecutive columns.

The third <col> applies to the next column.

How span Works

Consider a table with six columns:

<colgroup>
  <col span="3" class="first-group">
  <col span="3" class="second-group">
</colgroup>

The first <col> covers columns 1, 2, and 3.

The second <col> covers columns 4, 5, and 6.

This can be much shorter than writing six separate <col> elements.

<colgroup> Example with Multiple Column Groups

You can create different groups of columns when the table structure requires it.

<table>
  <colgroup>
    <col span="2" style="background-color: #f0f0f0;">
    <col span="2" style="background-color: #e8f5e9;">
  </colgroup>

  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Math</th>
    <th>Science</th>
  </tr>

  <tr>
    <td>Amit</td>
    <td>Kumar</td>
    <td>85</td>
    <td>90</td>
  </tr>
</table>

The first two columns belong to one visual group, while the last two belong to another.

<colgroup> with Table Width

You can use CSS to control column widths.

<table>
  <colgroup>
    <col class="name">
    <col class="email">
    <col class="age">
  </colgroup>

  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Rita</td>
    <td>rita@example.com</td>
    <td>28</td>
  </tr>
</table>

<style>
  .name {
    width: 25%;
  }

  .email {
    width: 50%;
  }

  .age {
    width: 25%;
  }
</style>

Modern CSS is generally preferred for controlling table layout, but <colgroup> can still provide a convenient way to associate widths with columns.

<colgroup> with table-layout

For predictable table sizing, you can combine <colgroup> with CSS.

<style>
  table {
    width: 100%;
    table-layout: fixed;
  }

  .name {
    width: 30%;
  }

  .email {
    width: 50%;
  }

  .age {
    width: 20%;
  }
</style>

<table>
  <colgroup>
    <col class="name">
    <col class="email">
    <col class="age">
  </colgroup>

  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Rita</td>
    <td>rita@example.com</td>
    <td>28</td>
  </tr>
</table>

The table-layout: fixed property can make column sizing more predictable, particularly when explicit widths are provided.

<colgroup> with Header and Data Cells

The <colgroup> element does not replace <th> or <td>.

A table still needs its rows and cells:

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>

  <tr>
    <th>Employee</th>
    <th>Department</th>
  </tr>

  <tr>
    <td>Anita</td>
    <td>Finance</td>
  </tr>
</table>

The <colgroup> describes the columns, while <th> and <td> contain the actual content.

<colgroup> Does Not Contain Table Cells

A common beginner mistake is putting table cells inside <colgroup>.

Incorrect:

<table>
  <colgroup>
    <td>Name</td>
    <td>Age</td>
  </colgroup>
</table>

This is invalid because <colgroup> is designed to contain <col> elements, not <td> or <th> elements.

Correct:

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>

  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
</table>

Position of <colgroup>

A <colgroup> is normally placed immediately after the opening <table> tag, before the table rows.

For example:

<table>
  <caption>Employee Information</caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>Name</th>
      <th>Department</th>
      <th>Salary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Ravi</td>
      <td>Sales</td>
      <td>$40,000</td>
    </tr>
  </tbody>
</table>

The <caption> comes before the <colgroup> in this example. The column group then appears before <thead>.

<colgroup> with <thead>, <tbody> and <tfoot>

A well-structured table can use <colgroup> together with semantic table sections.

<table>
  <caption>Monthly Sales</caption>

  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>

  <thead>
    <tr>
      <th>Month</th>
      <th>Sales</th>
      <th>Profit</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
      <td>$2,000</td>
    </tr>

    <tr>
      <td>February</td>
      <td>$12,000</td>
      <td>$2,500</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th>Total</th>
      <th>$22,000</th>
      <th>$4,500</th>
    </tr>
  </tfoot>
</table>

This creates a clear separation between the column definition and the table’s actual content.

Difference Between <colgroup> and <thead>

These elements serve completely different purposes.

<colgroup> describes a group of columns.

<thead> contains header rows and header cells.

For example:

<colgroup>
  <col>
  <col>
</colgroup>

<thead>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
</thead>

The <colgroup> describes the columns, while <thead> contains the visible header content.

Difference Between <colgroup> and <tbody>

<colgroup> works vertically by describing columns.

<tbody> groups rows containing the main table data.

For example:

<colgroup>
  <col>
  <col>
</colgroup>

<tbody>
  <tr>
    <td>Rahul</td>
    <td>25</td>
  </tr>
</tbody>

The first element describes columns. The second groups data rows.

Difference Between <colgroup> and <col>

The distinction is simple:

ElementPurpose
<colgroup>Groups columns
<col>Represents one or more columns within a group

Example:

<colgroup>
  <col span="2">
  <col>
</colgroup>

Here, <colgroup> is the container, while the two <col> elements define the column coverage.

Using <colgroup> for Alternating Column Groups

Column groups can make large tables easier to understand.

<table>
  <colgroup>
    <col span="2" class="student-info">
    <col span="3" class="marks">
  </colgroup>

  <tr>
    <th>Name</th>
    <th>Roll No.</th>
    <th>Math</th>
    <th>Science</th>
    <th>English</th>
  </tr>

  <tr>
    <td>Priya</td>
    <td>101</td>
    <td>90</td>
    <td>88</td>
    <td>92</td>
  </tr>
</table>

This structure clearly separates student information from marks.

When Should You Use <colgroup>?

<colgroup> is useful when:

  • Several columns need common styling.
  • You want to define column widths.
  • A large table has logical column groups.
  • You want cleaner table markup.
  • You want to avoid repeating the same column-related configuration.
  • You need to visually distinguish different groups of columns.
  • You want the table structure to communicate column relationships.

When Should You Avoid <colgroup>?

You do not need <colgroup> for every table.

For a very small table with simple styling, normal CSS applied directly to <th> and <td> elements may be easier.

For example, this may be sufficient:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>25</td>
  </tr>
</table>

There is no requirement to add <colgroup> simply because a table has columns.

Important CSS Limitation

A very important point is that <col> does not behave like an ordinary HTML element containing visible content.

For example, this will not work as many beginners expect:

col {
  font-size: 20px;
  color: red;
}

You should not rely on <col> to apply every CSS property to the cells below it.

If you need to control text size, font, alignment, padding, or other cell-level properties, it is usually better to style the <th> and <td> elements.

For example:

th,
td {
  padding: 10px;
  font-size: 16px;
}

Use <colgroup> mainly when column-level styling or structure is genuinely useful.

<colgroup> and Accessibility

The <colgroup> element can help organize the HTML structure of a complex table, but it does not automatically make a table accessible.

For accessible tables, use proper semantic markup such as:

  • <caption> for the table title.
  • <th> for header cells.
  • scope where appropriate.
  • <thead>, <tbody>, and <tfoot> when they improve structure.
  • Clear and meaningful table headings.

Example:

<table>
  <caption>Student Results</caption>

  <colgroup>
    <col>
    <col span="3">
  </colgroup>

  <thead>
    <tr>
      <th scope="col">Student</th>
      <th scope="col">Math</th>
      <th scope="col">Science</th>
      <th scope="col">English</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Arun</td>
      <td>85</td>
      <td>90</td>
      <td>88</td>
    </tr>
  </tbody>
</table>

The semantic headers are much more important for accessibility than simply using <colgroup>.

A Complete Practical Example

Here is a more complete example of <colgroup> in a real-world student results table:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Results</title>

  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }

    th,
    td {
      border: 1px solid #999;
      padding: 10px;
      text-align: left;
    }

    .student-column {
      width: 30%;
    }

    .marks-column {
      width: 23.33%;
    }
  </style>
</head>

<body>

  <table>
    <caption>Student Results</caption>

    <colgroup>
      <col class="student-column">
      <col class="marks-column">
      <col class="marks-column">
      <col class="marks-column">
    </colgroup>

    <thead>
      <tr>
        <th scope="col">Student</th>
        <th scope="col">Math</th>
        <th scope="col">Science</th>
        <th scope="col">English</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>Anita</td>
        <td>90</td>
        <td>85</td>
        <td>92</td>
      </tr>

      <tr>
        <td>Rahul</td>
        <td>82</td>
        <td>88</td>
        <td>86</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

This example demonstrates how <colgroup> can be used to define column widths while normal CSS handles the appearance of the table cells.

Common Mistakes with <colgroup>

1. Putting <td> inside <colgroup>

Incorrect:

<colgroup>
  <td>Product</td>
</colgroup>

Correct:

<colgroup>
  <col>
</colgroup>

2. Forgetting That <col> Represents Columns

This:

<col>

does not create a visible table cell. It defines a column for the table.

You still need <tr>, <th>, and <td> for the actual table content.

3. Using Too Many <col> Elements

If several consecutive columns have exactly the same configuration, span can make the markup shorter.

Instead of:

<col>
<col>
<col>
<col>

you may be able to use:

<col span="4">

4. Expecting Every CSS Property to Work

<col> has special table-column behavior. Do not assume that styling a <col> is equivalent to styling every <td> in that column.

For text formatting and detailed cell presentation, style the cells directly.

5. Using <colgroup> Without a Purpose

Adding <colgroup> to every table can make simple HTML more complicated.

Use it when it provides a real structural or styling benefit.

Best Practices for HTML <colgroup>

Follow these practices when using <colgroup>:

  1. Place <colgroup> near the beginning of the table.
  2. Use <col> inside <colgroup>.
  3. Use span when several consecutive columns share the same configuration.
  4. Use CSS classes instead of excessive inline styles.
  5. Do not put <td> or <th> inside <colgroup>.
  6. Use semantic table elements such as <caption>, <thead>, <tbody>, and <tfoot> where appropriate.
  7. Use <th> for actual table headers.
  8. Do not depend on <colgroup> for complete cell styling.
  9. Test complex tables in different browsers.
  10. Keep the table structure logical and easy to maintain.
  11. Use responsive CSS for tables that need to work on small screens.
  12. Do not add <colgroup> when ordinary cell styling is simpler.

Responsive Tables and <colgroup>

A table may become difficult to read on a small screen. <colgroup> does not automatically make a table responsive.

A common approach is to place the table inside a horizontally scrollable container:

<div class="table-container">
  <table>
    <colgroup>
      <col>
      <col>
      <col>
    </colgroup>

    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Department</th>
    </tr>

    <tr>
      <td>Rahul</td>
      <td>rahul@example.com</td>
      <td>Marketing</td>
    </tr>
  </table>
</div>

CSS:

.table-container {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
}

This allows users to scroll horizontally when the table is wider than the screen.

Browser Support

<colgroup> is a standard HTML table element and is supported by modern web browsers, including Chrome, Edge, Firefox, Safari, and other current browsers.

The main issue is not basic support for <colgroup>, but understanding which CSS properties can meaningfully be applied to table columns.

Is <colgroup> Still Useful in Modern HTML?

Yes. Although modern CSS provides many powerful ways to style tables, <colgroup> remains useful for expressing column structure and applying certain column-level styles.

It is particularly helpful for large tables where several columns share a common width or visual treatment.

However, it should not be treated as a replacement for CSS or semantic table markup.

Frequently Asked Questions

What is <colgroup> in HTML?

<colgroup> is an HTML element used to group one or more columns in a table. It is commonly used with <col> to define column-level styling or structure.

What is the purpose of <col>?

The <col> element represents one or more columns within a table. It can be used inside <colgroup> to target columns.

Where should <colgroup> be placed?

It should normally be placed inside <table> before the table’s row groups such as <thead>, <tbody>, and <tfoot>. If a <caption> is present, the caption normally comes before the <colgroup>.

Can <colgroup> contain <td>?

No. <colgroup> is intended to contain <col> elements. Table cells belong inside table rows such as <tr>.

Can I use multiple <colgroup> elements?

Yes, multiple column groups can be used when the table structure requires them, subject to the HTML table model and correct column coverage.

What does span mean in <col>?

The span attribute specifies how many consecutive columns a <col> element represents.

Example:

<col span="3">

This represents three consecutive columns.

Does <colgroup> create table cells?

No. It does not create visible cells. It describes columns. The actual cells are created with <th> and <td> inside <tr> elements.

Can I set column width using <colgroup>?

Yes. You can associate CSS widths with <col> elements. However, the final layout also depends on the table’s CSS, table layout algorithm, content, and other constraints.

Is <colgroup> required for HTML tables?

No. It is optional. Use it when column-level grouping or styling makes your table easier to structure and maintain.

What is the difference between colspan and <colgroup>?

colspan is an attribute on a table cell that makes one cell span multiple columns.

<colgroup> groups or describes columns at the table-column level.

For example:

<td colspan="2">Combined Cell</td>

makes one cell occupy two columns.

By contrast:

<colgroup>
  <col span="2">
</colgroup>

defines a column configuration covering two columns.

Can <colgroup> improve accessibility?

It can make the table’s HTML structure clearer, but it does not by itself make a table accessible. Proper headers, captions, semantic structure, and appropriate relationships between headers and data are more important.

Final Thoughts

The HTML <colgroup> element provides a clean way to describe and organize groups of columns in a table. When combined with <col>, it can reduce repeated markup and make column-level styling or sizing easier to manage.

The most important thing to remember is that <colgroup> describes columns; it does not contain the table’s visible data. Use <tr>, <th>, and <td> for table content, and use CSS for detailed presentation.

For simple tables, you may not need <colgroup> at all. For larger or more structured tables, however, it can make the HTML clearer, more maintainable, and easier to manage.

Related Posts

Search
Scroll to Top