Skip to content
Related Articles

Related Articles

Improve Article

HTML <colgroup> Tag

  • Difficulty Level : Basic
  • Last Updated : 02 Mar, 2021

This tag is used to specify the group of one or more columns in a table for formatting. It is useful for applying styles to entire columns, instead of repeating the styles for each column, and for each row. Use the <col> tag within the <colgroup> tag to define different properties to a column within a <colgroup>. Most of the attributes in HTML 4.01 <colgroup> are not supported in HTML5.

Syntax: 

<colgroup> Column lists... </colgroup>

Attributes: 

  • align: It is used to align the text or content in the group of columns. The value of the aligned property is left, right, center, justify, char.
  • char: It is used to align the character in a column group and the value of these attributes is the character.
  • charoff: It is used to sets the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes is in numeric form.
  • span: It is used to specify the number of columns that have colgroup tag. The values are in numeric form.
  • valign: It specifies the vertical alignment of content in a colgroup. It’s values are the top, middle, bottom, baseline.
  • width: It defines the width of a column group. It’s values are pixels, %, relative_length.
     

Example: The below example explains the HTML colgroup tag.
 

html




<!DOCTYPE html>
<html>
  <body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML colgroup tag</h2>
    <table>
      <!-- colgroup tag starts here-->
      <colgroup>
        <col span="2" style="background-color: green; color: white" />
        <col style="background-color: tomato" />
            <!-- colgroup tag ends here--> 
      </colgroup>
      <tr>
        <th>STUDENT</th>
        <th>COURSE</th>
        <th>AGE</th>
      </tr>
      <tr>
        <td>Manas Chhabra</td>
        <td>BCA</td>
        <td>19</td>
      </tr>
      <tr>
        <td>Anurag Gupta</td>
        <td>B.TECH</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>

Output: 
 



Supported Browsers: 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :