🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

HTML Columns

Reading time 2 min
Published Mar 19, 2019
Updated Oct 1, 2019

HTML Columns: Main Tips

  • The <colgroup> element sets a group of columns in HTML tables.
  • This element is a parent of <col>.
  • The <table> element is a parent of <colgroup> in HTML.

Use and Purpose of colgroup

The <colgroup> element specifies a common formatting style for a group of HTML columns.

Note: a <col> element can be used within <colgroup> to define a different property for a single column in the group.

Example
<table>
  <colgroup>
    <col span="1" style="background-color: cornsilk;">
    <col style="background-color: bisque;">
  </colgroup>
  <tr>
    <th>Price</th>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>100</td>
    <td>Peanut Butter</td>
    <td>2</td>
  </tr>
</table>

The <table> tag needs to be the parent of the <colgroup> element. The <colgroup> tag must be positioned before any <thead>, <tbody>, <tfoot>, <tr> tags and after <caption> tags.

span

The span attribute specifies a number of columns, indicating the span of a column group.

Example
<table>
  <colgroup span="2" style="background-color: darkgray;"></colgroup>
  <tr>
    <th>Name</th>
    <th>City</th>
  </tr>
  <tr>
    <td>James</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Laura</td>
    <td>Chicago</td>
  </tr>
</table>

Remember: always use <colgroup> with span when there are no <col> elements.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

Deprecated Attributes

align

It defined the alignment of contents in a column group. Not supported in HTML5: apply the CSS text-align property instead.

Example
<table style="width: 100%;">
  <colgroup align="right"></colgroup>
  <tr>
    <th>Name</th>
  </tr>
  <tr>
    <td>James</td> 
  </tr>
</table>

char

It set the alignment of contents in a column group to a character. Not supported in HTML5.

Example
<table style="width: 100%;">
  <colgroup align="left"></colgroup>
  <colgroup align="char" char="."></colgroup>
  <tr>
    <th>Name</th>
    <th>Earning</th>
  </tr>
  <tr>
    <td>James</td>
    <td>$100.00</td>
  </tr>
</table>

charoff

It specified the number of characters to offset the content of a column group from the alignment character. Not supported in HTML5.

Example
<table style="width: 100%;">
  <colgroup align="left"></colgroup>
  <colgroup align="char" char="." charoff="2"></colgroup>
  <tr>
    <th>Name</th>
    <th>Earnings</th>
  </tr>
  <tr>
    <td>James</td>
    <td>$100.00</td>
  </tr>
  <tr>
    <td>Laura</td>
    <td>$10.00</td>
  </tr>
</table>

valign

It set the vertical alignment of a column group. Not supported in HTML5 - apply vertical-align as an alternative.

Example
<table style="height: 200px;">
  <colgroup valign="top">
  <colgroup valign="bottom">
  <tr>
    <th>Name</th>
    <th>Designation</th>
  </tr>
  <tr>
    <td>James</td>
    <td>Engineer</td>
  </tr>
</table>

width

It defined the width of a column group (usually in pixels). Since it is also not supported in HTML5, you should use the CSS width property.

Example
<table>
  <colgroup width="200">
  <tr>
    <th>Name</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>James</td>
    <td>Construction</td>
  </tr>
</table>

Browser support

Browser image
Chrome
1+
Browser image
Edge
All
Browser image
Firefox
1+
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
4+
Browser image
Opera
All
Browser image
Safari
All