html tutorial - <colgroup> Column Group tag in HTML - html5 - html code - html form



  • The <colgroup> tag specifies a group of columns in a table for formatting.
  • The <colgroup> tag is suitable for applying styles to whole columns, instead of copying the styles for each cell, for each row.
  • The <colgroup> tag supports Global Attributes and Event Attributes.

Syntax for <colgroup> tag :

<colgroup>Content</colgroup>

Differences between HTML 4.01 and HTML5 for <colgroup> tag:

HTML 4.01

  • <align>,<char>,<charoff>,<valign>,<width> are supported.

HTML5

  • All Layout attributes are not supported .

Sample coding for <colgroup> tag:

 Tryit<!DOCTYPE html>
  <html >
    <body>
      <table border=1>
      <colgroup>
        <col span="1" style="background-color:red">
        <col style="background-color:green">
      </colgroup>
           <tr>
              <th>Firstname</th>
              <th>Lastname</th>
           </tr>
           <tr>
              <td>Wiki</td>
              <td>techy</td>
           </tr>
      </table>
    </body>
  </html>

Code Explanation for <colgroup> tag :

Code Explanation for <colgroup> tag
  1. <colgroup> tag - is used for group the column in the table.
  2. Col is the tag and the style color red is applied for single column with its span property as 1.

Output for <colgroup>Tag :

Output for <colgroup> tag

  1. Here in this output Red Color style property for single column has been applied over here whose span property is 1.
  2. Note: Here span property “1” indicates the first column.

Attribute of <colgroup> tag:

Attribute Value HTML4.0.1 HTML5 Description
span number Yes Yes Defines the number of columns.
align left
right
center
justify
char
Yes No Provides the alignment of the content.
width %
pixels
relative_length
Yes No Defines the width.
valign top
middle
bottom
baseline
Yes No Describes the alignment of the content in vertical.
char character Yes No Defines the content alignment relevant to a character.
charoff number Yes No Provides the number of characters.

Browser support for <colgroup> tag:

Yes Yes Yes Yes Yes

Tips and Notes:

  • The <colgroup>tag have a child of <table> tag.
  • <col> tag is used within the <colgroup>tag to specifies another properties to the column.


Related Searches to <colgroup> tag in html