HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python Contents
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.
<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.
<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.
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified 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.
<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.
<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.
<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.
<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.
<table>
<colgroup width="200">
<tr>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>James</td>
<td>Construction</td>
</tr>
</table>Browser support
Chrome
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera
