In this section, we will learn what <colgroup> element is and how it works.

What is <colgroup> Tag in HTML?

HTML <colgroup> element acts as a container and is used to change the format of columns in an HTML table.

Within HTML <colgroup> element, we use HTML <col> element. This is <col> element that is specifically used to apply the format to each column.

So basically the <colgroup> is the container for <col> element in an HTML table.

But if we want to apply a format to the entire or just one or two columns of a table and we don’t want to use <col> element, then the <colgroup> can be directly used to apply the format as well.

That being set, if we used <colgroup> to directly apply a format, then we shouldn’t use <col> elements in the body of this <colgroup> anymore. Otherwise, the format set in the <colgroup> becomes ineffective.

Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.

HTML <colgroup> Tag Syntax:

<colgroup>

<col>

<col> …

</colgroup>

HTML <colgroup> Tag Values

The value we set within the body of <colgroup> element is one or more <col> element.

This <col> element is the place where we can format each column of the target table.

Example: using <colgroup> tag in HTML

See the Pen using <colgroup> tag in HTML by Omid Dehghan (@odchan1) on CodePen.

HTML <colgroup> Tag Attributes

HTML <colgroup> element has one attribute and that is span. Using this attribute, we can declare the number of columns of the target table to apply the format on them.

What is span Attribute in HTML <colgroup> Tag?

As mentioned before, HTML <colgroup> has only one attribute and that is span. This attribute specifies how many columns specifically we want the format of the <colgroup> element to be applied on them.

HTML span Attribute in <colgroup> Tag Syntax:

<colgroup span = "Number"> </colgroup>

<colgroup> Tag span Attribute Values

The value we set for the span attribute is a number. This number declares how many columns of the target table should be involved in the formatting.

Example: using span attribute in HTML <colgroup> tag

See the Pen using span attribute in HTML <colgroup> tag by Omid Dehghan (@odchan1) on CodePen.