W3docs
en
Log in

HTML <colgroup> Tag

The <colorgroup> tag defines the number of columns, that have the same properties, defined by the <col> tag.

The HTML <colgroup> tag is used to specify a group of columns with common properties inside a table. The tag can only contain <col> elements, which define column properties.

The <colgroup> tag is nested inside a <table> tag, before <thead>, <tbody>, <tfoot> and <tr>, and after <caption>, if it is used (in the <caption> tag, the table caption is inserted).

A single HTML table can include several <colgroup> tags.

Syntax

The <colgroup> tag comes in pairs. The content is written between the opening (<colgroup>) and closing (</colgroup>) tags.

Example of the HTML <colgroup> tag:

HTML <colgroup> Tag

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table, th, td {
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col span="2" style="width:20%; background-color:#eee;" />
        <col style="width:10%; background-color:#8ebf42;" />
      </colgroup>
      <tr>
        <th>Name</th>
        <th>Gender</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>Mary Nicolson</td>
        <td>female</td>
        <td>19</td>
      </tr>
      <tr>
        <td>John Johnson</td>
        <td>male</td>
        <td>23</td>
      </tr>
    </table>
  </body>
</html>
Try it Yourself »

Result

colgroup example

Attributes

Note: Presentation attributes like align, valign, and width are deprecated in HTML5. Use CSS properties (text-align, vertical-align, width) instead.

AttributeValueDescription
alignleft | right | center | justify | charSets the alignment of the column contents. Not supported in HTML5.
charcharacterAligns the contents of the column with the specified character. Used only if align="char". Not supported in HTML5.
charoffnumberShifts the contents of the cell relative to the specified character. Used only if align="char". Not supported in HTML5.
spannumberSets the number of columns the <col> element applies to. Default is 1.
valigntop | middle | bottom | baselineAligns the content vertically. Not supported in HTML5.
width% | pixels | relative_lengthSets the width of the column. Not supported in HTML5.

The <colgroup> tag also supports the Global Attributes and the Event Attributes.

Practice

Practice

What is the correct depiction and use case of the HTML <colgroup> tag?