HTML colgroup Tag

HTML colgroup Tag defines a group of one or more columns inside the table element.

Table of Contents

Syntax of HTML colgroup Tag

The Syntax of HTML colgroup Tag is shown below. It has both starting and ending tags.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<colgroup>
<col span="2" style="background-color:red">
<col span="2" style="background-color:blue">
</colgroup>
</body>
</html>

Usage of HTML colgroup Tag

HTML colgroup Tag is used to define the group of columns inside the table element, with the help of colgroup tag you can apply same CSS styles on all columns of one colgroup element.

The colgroup element must be used inside the table tag just after the caption tag and before the table head, table body and table footer.

The span attribute defines the no of columns a colgroup should span.

Example of HTML colgroup Tag

Simple example of HTML colgroup Tag is shown below.


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
  <colgroup span='2'  style="background-color:yellow;">
    <col span="1">
    <col span="1">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Jade</td>
    <td>93</td>
  </tr>
</table>
</body>
</html>

Output

The output of code above is shown below.

Name	Marks
Jade	93

Browser Support for HTML colgroup Tag

HTML colgroup Tag is supported by all major browsers.

Global Attributes Support in HTML colgroup Tag

The HTML colgroup Tag supports all Global Attributes.

Event Attributes Support in HTML colgroup Tag

The HTML colgroup Tag supports all Event Attributes.