Loading...
HTML <colgroup> Tag

HTML <colgroup> Tag

In this tutorial, we will learn about colgroup tag in HTML with the help of examples.


<colgroup> Tag

Colgroup tag <colgroup> is used for specifying properties for a group of columns within a table.
It is used to applying styles to entire columns in a row, instead of apply styling for each column with the help of <col> tag.

Note : The <colgroup> tag must be used immediately after the <caption> tag as children of the <table> tag.

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Colgroup Tag</title>
  </head>
  <body>
    <table>
      <colgroup>
        <col span = "1" style = "background-color : red">
        <col span = "1" style = "background-color : yellow">
        <col span = "1" style = "background-color : greenyellow">
      </colgroup>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Sunny</td>
        <td>Chaudhary</td>
        <td>20</td>
      </tr>
      <tr>
        <td>Anu</td>
        <td>Chaudhary</td>
        <td>19</td>
      </tr>
    </table>
  </body>
</html>

Output

First NameLast NameAge
SunnyChaudhary20
AnuChaudhary19

Specific Attribute

Attribute Value Description
align right
left
center
justify
char
Defines the horizontal alignment of the columns
char character Define a character to use to align the text
charoff pixel Specifies an alignment offset (either in px or percentage value) against the first character as specified with the char attribute
span number Defines the number of columns the <col> should span
valign bottom
middle
top
baseline
Defines verticle alignment
width pixels
percentage
Specifies a default width for each column spanned by the current <col> element

Global Attribute

Colgroup Tag support all the global attributes of HTML.


Event Attribute

Colgroup Tag support all the event attributes of HTML.


Next Tutorial

We hope that this tutorial helped you develop better understanding of the concept of colgroup tag in HTML.

Keep Learning : )

In the next tutorial, you'll learn about HTML data Tag.

- Related Topics