Colgroup HTML

HTML <colgroup> Tag

To define a group of column within an HTML table, the HTML <colgroup> tag is used. It is also used to apply different properties in an HTML table, where the HTML <colgroup> tag acts as a parent container of one or more <col> elements. The <colgroup> tag is placed after the <caption> tag within the <table> element. It is placed before the <th> or <td> elements.

Syntax:

<colgroup>......</colgroup>

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid brown;
}
</style>
</head>
<body>
 
<table width="400">
<caption>Students Details</caption>
  <colgroup>
  <col style="background-color:lightgray">
  <col span="2" style="background-color:lightyellow">
  </colgroup>
  <tr>
    <th>ID</th>
    <th>NAME</th>
    <th>SUBJECT</th>
  </tr>
  <tr>
    <td>101</td>
    <td>Happy Singh</td>
    <td>English</td>
  </tr>
  <tr>
    <td>201</td>
    <td>Smiley Das</td>
    <td>French</td>
  </tr>
   <tr>
    <td>301</td>
    <td>Joy Gupta</td>
    <td>Hindi</td>
  </tr>
</table>
</body>
</html>

 

Output:

Explanation:

In the above example, we are using the HTML <colgroup> tag to apply different properties in an HTML table. It acts as a container for one or more <col> elements.

Tag-specific Attributes:

Attribute Value Uses HTML5
align left

right

center

justify

char

Used to define the content-alignment related to a column group. Not supported in HTML5.
char character Used to define the content-alignment related to a column group to a character. Not supported in HTML5.
charoff number From the character specified by the char attribute, it defines the number of characters the content will be aligned. Not supported in HTML5.
span number Used to define the number of columns which a column group should span.
valign top

middle

bottom

baseline

Used to define the vertical content-alignment related to a column group. Not supported in HTML5.
width %

pixels

relative_length

Used to define the width of a column group. Not supported in HTML5.

Global Attributes:

All the Global attributes are supported by the HTML <colgroup> tag.

Event Attributes:

All the Event attributes are supported by the HTML <colgroup> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

Please Share