HTML / HTML Tags

HTML <Colgroup> Tag

Oct 12, 2022
2 min read
HTML colgroup Tag

Definition

The <colgroup> tag is used to specify a group of columns in a table.

Example

<table>
  <colgroup>
    <col span="2" style="background-color:red;">
    <col style="background-color:green;">
  </colgroup>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>CELL</td>
    <td>CELL</td>
    <td>CELL</td>
  </tr>
</table>

Usage

  • The <colgroup> tag is used to define a group of columns in a table so styles can be applied to the whole column or columns instead of having to repeat styles for each cell.

  • It must be a child of the <table> element. It must be located after any <caption> elements, but before any <thead>, <tbody>, <tfoot>, and <tr> elements.

  • If the <colgroup> contains no <col> elements it may have a span attribute. An example is as follows:

    <table>
    <colgroup span="2" style="background:red;">
    </colgroup>
    <tr>
      <th>Heading 1</th>
      <th>Heading 2</th>
      <th>Heading 3</th>
    </tr>
    <tr>
      <td>CELL</td>
      <td>CELL</td>
      <td>CELL</td>
    </tr>
    </table>

  • The start tag can be omitted if there is a <col> element immediately inside, and there are no other <colgroups> preceding it. The following example is acceptable:

    <table>
    <col span="2" style="background-color:red;">
    <col style="background-color:green;">
      <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
      </tr>
      <tr>
    <td>CELL</td>
    <td>CELL</td>
    <td>CELL</td>
      </tr>
    </table>

  • An end tag is not required, but only if the <colgroup> is not empty.

Attributes

The <col> element supports the Global Attributes, as well as the following:

  • span

    The span attribute specifies the number of columns that the column group should span. The value of the <span> attribute must be a positive number greater than zero. It is not permitted if there are one or more <col> elements within the <colgroup>.

Specification

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes