HTML Table Column Groups

Understanding HTML Table Column Groups

HTML tables can group related columns using the <colgroup> and <col> elements.

These elements describe columns as structural groups and can also provide a convenient way to apply limited styling across one or more columns without repeating styles on every individual table cell.

Table Column Group Syntax

The <colgroup> element is placed inside the <table> element and contains one or more <col> elements that represent columns or groups of columns.

<table>
  <colgroup>
    <col>
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Course</th>
    <th>Level</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>Beginner</td>
    <td>Completed</td>
  </tr>
</table>

Each <col> corresponds to one or more columns in the table grid, beginning with the first column and continuing from left to right.

The <colgroup> Element

The <colgroup> element represents a group of one or more columns within a table.

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

When a table includes a <caption>, the <colgroup> follows the caption and appears before row groups such as <thead>, <tbody>, and <tfoot>.

The <col> Element

The <col> element represents one or more columns within a <colgroup>. It is a void element and does not have a closing tag.

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

The first <col> corresponds to the first column, the second to the second column, and so on unless the span attribute is used.

Spanning Multiple Columns

The span attribute can make a <col> represent more than one consecutive column.

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

In this example, the first <col> represents the first column, while the second <col> represents the next two columns.

Styling Table Columns

One common use for <colgroup> and <col> is applying supported CSS properties to whole columns rather than styling every individual cell.

<colgroup>
  <col>
  <col class="highlight">
  <col>
</colgroup>

.highlight {
  background-color: #f2f2f2;
}

Column styling is more limited than styling individual table cells, so not every CSS property behaves the same way when applied through <col> or <colgroup>.

Column Groups vs Column Headers

Column groups and column headers serve different purposes. The <colgroup> and <col> elements describe structural column groupings, while <th> elements provide visible header cells that identify the meaning of the table data.

Do not use <colgroup> as a replacement for proper table headings. Tables still need appropriate <th> elements when column or row labels are necessary.

Table Column Group Example

The following example uses a <colgroup> to identify three table columns and applies a different background to the middle column. Change the span value or move the class to another <col> to see which columns are affected.

Table Column Group Best Practices

• Use <colgroup> when several table columns need to be treated as a structural group.
• Use <col> to represent individual columns or consecutive groups of columns.
• Use the span attribute when one <col> should represent multiple adjacent columns.
• Place column groups before table row groups such as <thead> and <tbody>.
• Keep the number and order of column definitions consistent with the table grid.
• Use column groups for meaningful structure or supported styling rather than adding them unnecessarily.
• Continue to use proper <th> elements to identify the meaning of rows and columns.

Summary

The <colgroup> and <col> elements describe groups of columns in an HTML table. A <col> can represent one or several columns using the span attribute, and column groups can provide useful structural information and limited column-wide styling while table headers continue to identify the meaning of the data.