Col and colgroup

Bridge styling to columns with <col> and <colgroup>.

Col and colgroup

The <colgroup> tag groups columns in a table; it holds <col> tags. Each <col> stands for one column and bridges shared styling to it.

Instead of styling each <td> one by one, you can format a whole column from a single spot. For example, to right-align the amount column in a price list, place one <col> inside <colgroup> and add the alignment there.

<col> is a void element; it has no closing tag.

Grouping columns with col span

A <col> tag stands for a single column by default. To apply the same style to several columns at once, use the span attribute: <col span="2"> covers two columns.

For example, in a four-column table, to style the last three columns the same way you can write <colgroup><col><col span="3"></colgroup>. This keeps the code short and consistent.

Exercise Build a table with colgroup and col span

Write a <table>. Put a non-empty <caption> inside. After caption add a <colgroup> holding one <col> and one <col span="2">. Then add <thead> with a row of <th scope="col">, and <tbody> with at least one row of <td>.

Show example solution

<table>
  <caption>Monthly Sales Report</caption>
  <colgroup>
    <col>
    <col span="2">
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Product</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jan</td>
      <td>Headphones</td>
      <td>$3,200</td>
    </tr>
  </tbody>
</table>

Test yourself

What is the core role of colgroup?
- Merge cells together
- Bridge shared styling to columns
- Add a title to the table
- Make the table scrollable
Show answer

Bridge shared styling to columns — Correct. colgroup bridges shared styling to columns through the col tags it holds.

Add a colgroup to the table

<table>
  <caption>Monthly sales</caption>
  ____>
    <col>
    <col span="2">
  </colgroup>
</table>

Show answer

<table>
  <caption>Monthly sales</caption>
  <colgroup>>
    <col>
    <col span="2">
  </colgroup>
</table>

Match each tag to its role

colgroup

Groups columns
col

Stands for a single column
span attribute

Covers several columns
caption

Titles the table

Next lesson: Scope and headers

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies