Menu

HTML colgroup Tag

HTML colgroup Tag

The HTML <colgroup> tag is used to specify the properties like font color, background color, border, etc for a group of columns in a table.

  • This is helpful in applying a style to multiple columns without defining the style again and again for each cell just like the HTML <col> tag.
  • The <colgroup> tag must be placed after the <caption> tag and before the <tbody>, <thead>, <tfoot>, <tr> tags.
  • You can use the span attribute of the <colgroup> tag to specify the number of columns on which you want to apply the properties

HTML <colgroup> Tag - Syntax and Usage

The <colgroup> element requires the start(opening) tag and end(closing) tag.

Given Below is the required syntax for the same:

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

HTML <colgroup> Tag Basic Example

Below we have a basic example for clear understanding of <colgroup> tag:

<!doctype html>
<html>
    <head>
        <title>
            Example of colgroup element
        </title>
    </head>
    <body>
        <table>
            <colgroup span="2" style="background-color:yellow">
            </colgroup>
            <tr>
                <th>Emp id</th>
                <th>Emp name</th>
                <th>DOB</th>
                <th>Adress</th>
            </tr>
            <tr>
                <td>001</td>
                <td>Mahesh</td>
                <td>09-06-1986</td>
                <td>New Delhi </td>
            </tr>
          <tr>
                <td>002</td>
                <td>Suresh</td>
                <td>10-08-1986</td>
                <td>Noida </td>
            </tr>
               <tr>
                <td>003</td>
                <td>Prakash</td>
                <td>10-10-1987</td>
                <td>Ghaziabad </td>
            </tr>
         
                  
        </table>
    </body>
</html>

In the example above, we have used the span attribute to cover two columns using the <colgroup> tag.

HTML <colgroup> Tag Attributes

This element does not have any specific attributes although this element supports Global attributes and Event attributes.

The main attribute of the <colgroup> tag is the span attribute.

  • The span attribute can have a value in the form of a positive integer.
  • The default value of the span attribute is 1.
  • The value of span indicates the number of consecutive columns the colgroup element spans or covers.

Default CSS style for HTML <colgroup> tag

colgroup {
  display: table-column-group;
}

Browser Support for HTML5<colgroup> tag

Following browsers support this attribute:

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 7+