BBM Tutor
BBM Tutor

HTML5 Tag - <colgroup>

Definition & Uses of HTML5 <colgroup>

The HTML5 <colgroup> tag is not a new tag but it has been redefined. The attributes called align, char, charoff, valign, width are deprecated in HTML5.

Syntax of HTML5 <colgroup> Tag

<colgroup span="Non-Negative Integer Number Greater Than Zero"></colgroup>

What is HTML5 <colgroup> ?

  • The <colgroup> tag represents a group of one or more columns in a table.
  • The <colgroup> tag can only be used inside a table element.
  • The colgroup element can only contain col elements.
  • Simply said, The colgroup element is a container for a group of one or more col elements.
  • The attributes defined at this higher level apply to all of the child columns.
  • If the colgroup element contains no col elements, then the element may have a span content attribute specified.
  • The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
  • End tag </colgroup> is optional one in HTML4 and HTML5, but its must in XHTML.

Where to use HTML5 <colgroup> Tag?

  • The <colgroup> tag is used for specifying properties for group of column within table.
  • It is useful for applying styles to group of columns, instead of repeating the styles for each cell and for each row.
  • Use the colgroup element only if you want to specify the same attribute values to a group of columns simultaneously.

Tips & Notes

  • To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.
  • The colgroup element is parent of col element and child of table element.
  • The colgroup element does not create columns. It just apply formattings to the columns. To create columns, you must specify td elements within a tr element.

Simple HTML5 Example #1

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <colgroup> - HTML5 Tags Tutor </title>
</head>
<body>
<article>
<table>
<caption><colgroup> Tag Example</caption>
<colgroup style="width:20%;>
<col style="background-color:#999999;"/>
<col span="5" style="background-color:#CCCCCC;"/>
</colgroup>
<thead>
<tr>
<th rowspan="2" style="background-color:#FFFFFF"></th>
<th colspan="5">Time Table</th>
</tr>
<tr style="vertical-align: bottom; background-color:#999999">
<th>10.00 am - 11.30 am</th>
<th>11.30 am - 1.00 pm</th>
<th>1.00 pm - 2.00 pm</th>
<th>2.00 pm - 3.30 pm</th>
<th>3.30 pm - 5.00 pm</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="6">Have a nice day....</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Monday /td>
<td>Major 1 </td>
<td>Allied 1 </td>
<td rowspan="4">Lunch </td>
<td>Major 2 </td>
<td>Allied 2 </td>
</tr>
<tr>
<td>Tuesday/td>
<td>Major 2 </td>
<td>Allied 2 </td>
<td>Major 1</td>
<td>Allied 1 /td>
</tr>
<tr>
<td>Wednesday </td>
<td>Allied 1 </td>
<td>Major 1 </td>
<td>Allied 2 </td>
td>Major 2 </td>
</tr>
<tr>
<td>Thursday </td>
<td>Allied 2 </td>
<td>Major 2 </td>
<td>Major 1 </td>
<td>Allied 1/td>
</tr>
</tbody>
</table>
</article>
</body>
</html>

Output Screen

<colgroup> Tag Example
Time Table
10.00 am - 11.30 am 11.30 am - 1.00 pm 1.00 pm - 2.00 pm 2.00 pm - 3.30 pm 3.30 pm - 5.00 pm
Have a nice day....
Monday Major 1 Allied 1 Lunch Major 2 Allied 2
Tuesday Major 2 Allied 2 Major 1 Allied 1
Wednesday Allied 1 Major 1 Allied 2 Major 2
Thursday Allied 2 Major 2 Allied 1 Allied 2

Attributes

  • Attributes are the features added to a tag to provide the browser with more information about how the tag should appear or behave.
  • There are 3 type attributes a tag can have. They are Global Attributes, Event Attributes and Element-Specific Attributes.
  • The <colgroup> tag is also capable of supporting the Global Attributes and Event Attributes in HTML5.

Element-Specific Attributes

Attributes

Description

Specifies the number of column group have to span

span

  • It defines the number of consecutive columns to which colgroup attributes should apply.
  • This attribute should not be used if there are any <col> elements within this <colgroup> tag.
  • This attribute's value must be a valid non-negative integer greater than zero.
  • Possible value:
  • Number of columns

Element-Specific Attributes Not Supported in HTML5

Attributes

Description

align
Specifies the alignment of the content inside the colgroup
char
sets the character to which colgroup contents should align
charoff
Specifies an alignment offset (either in pixels or percentage value) for the alignment character (first occurrence) on each line.
valign
Specifies vertical alignment
width
Specifies a default width for each column spanned by colgroup element
BBM Invoice
 
Disclaimer: Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.