HTML - <colgroup> Tag

Quiz

Introduction to <colgroup> Tag

The HTML <colgroup> tag is used to group one or more columns within the <table>, providing a way to apply specific styles or attributes to entire columns instead of individual cells. It is used in combination with the <col> tag to improve the table visual presentation. The <colgroup> tag makes the table structure more organized and allows for easier styling through CSS.

The <colgroup> tag is not mandatory for table structure, it provides a semantically better way of grouping columns for applying styles to individual <td> or <th> elements.

Syntax

Following is the syntax of HTML <colgroup> tag −.

<colgroup>...</colgroup>

Attributes

HTML colgroup tag supports Global and Event attributes of HTML. Some Specific attributes as well which are listed bellow.

Attribute	Value	Description
span	number	Specifies the number of consecutive columns the <col> element spans.
align	left right center justify	Specifies the alignment of text content(Deprecated).
bgcolor	color	Specifies the background color of each column cell(Deprecated).
char	character	Specifies the alignment of the content to a character of each column cell(Deprecated).
charoff	number	Specifies the number of characters to offset the column cell content from the alignment character specified by the char attribute(Deprecated).
valign	baseline bottom middle top	Specifies the vertical alignment of each column cell(Deprecated).

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of the <colgroup> tag.

<!DOCTYPE html>
<html>
<body>
   <table border="1">
      <colgroup>
         <col style="background-color:#ABEBC6">
         <col style="background-color:#BB8FCE">
      </colgroup>
      <tr>
         <th>Roll.No</th>
         <th>Name</th>
      </tr>
      <tr>
         <td>1</td>
         <td>Maya</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Surya</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Ram</td>
      </tr>
   </table>
</body>
</html>

Example : Using span Attribute

Consider the following example, where we are going to use the span attribute along with the <colgroup> tag.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table>
      <colgroup>
         <col span="2" style="background-color:#F9E79F">
      </colgroup>
      <tr>
         <th>Item</th>
         <th>Price</th>
      </tr>
      <tr>
         <td>5-Star</td>
         <td>$10</td>
      </tr>
      <tr>
         <td>Dairy-Milk</td>
         <td>$50</td>
      </tr>
      <tr>
         <td>Kitkat</td>
         <td>$20</td>
      </tr>
   </table>
</body>
</html>

Example : Hiding Column

In the following example, we are going to hide the column using the visibility:collapse property.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
         border-collapse: collapse;
      }
   </style>
<body>
   <table style="width: 100%;">
      <colgroup>
         <col span="2">
         <col span="3" style="visibility: collapse">
      </colgroup>
      <tr>
         <th>ID</th>
         <th>Employee</th>
         <th>Department</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>112</td>
         <td>Rahul</td>
         <td>IT</td>
         <td>22</td>
      </tr>
      <tr>
         <td>113</td>
         <td>Ram</td>
         <td>Associate</td>
         <td>24</td>
      </tr>
      <tr>
         <td>114</td>
         <td>Maya</td>
         <td>HR</td>
         <td>30</td>
      </tr>
      <tr>
         <td>115</td>
         <td>Rahul</td>
         <td>BPO</td>
         <td>23</td>
      </tr>
   </table>
</body>
</html>

Supported Browsers

Tag
colgroup	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page