<colgroup> Tag for a Column Group

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

The <colgroup> Tag in HTML 5

The <colgroup> tag can be used to provide the style for multiple columns in an HTML table. The set of columns that are grouped together is specified by coding either the span attribute or col elements.

Table Caption
Multiple Column Heading
First Column Heading Second Column Heading
This is an example of an HTML table footer.
Row 1 Row 1 Column 1 Row 1 Column 2
Row 2 Row 2 Column 1 Row 2 Column 2

This is an actual working demo of the table colgroup example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)

See the tutorial on Creating HTML Tables for full details on how to create an HTML table using the HTML table tags together.


<colgroup> Tag Syntax

<colgroup> tag with span attribute
<body>
   ...
   ... flow content expected ...
   <table>
      <colgroup span="n"></colgroup>
      ...
   </table>
   ...
</body>
Rules for coding a colgroup element with a span attribute

<colgroup> tag with col elements
<body>
   ...
   ... flow content expected ...
   <table>
      <colgroup>
         <col>...</td>
         ...
      </colgroup>
      ...
   </table>
   ...
</body>
Rules for coding a colgroup element with col elements
Child Elements of the <colgroup> tag
<col/> tag(s)

<colgroup> Tag Attributes

Attributes of the <colgroup> tag
global attributes In addition to the personal attributes of the <colgroup> tag below, any of the common HTML attributes can also be coded.
span integer number of columns >= 1

<colgroup> Tag Examples

Examples of the colgroup tag in HTML 5

Here is the HTML code for the table demo above:

<table>
   <caption>Table Caption</caption>
   <colgroup>
      <col style="width: 20%"/>
      <col style="width: 80%"/>
   </colgroup>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2">Multiple Column Heading</th>
      </tr>
      <tr style="vertical-align: bottom">
         <th>First Column Heading</th>
         <th>Second Column Heading</th>
      </tr>
   </thead>
   <tfoot>
      <tr><td colspan="2">This is an example of an HTML table footer.</td></tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
      <tr>
         <td>Row 2 Column 1</td>
         <td>Row 2 Column 2</td>
      </tr>
   </tbody>
</table>

Changes in HTML 5 - <colgroup> Tag

What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the colgroup element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.


Valid HTML 5