W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

colgroup ... ⁄colgroup

Share it

colgroup intro colgroup optional colgroup browser display colgroup parents - children colgroup syntaxcolgroup span attribute

HTML5 colgroup element

The colgroup element allows you to group one or more columns in a table. »video

The number of columns to be grouped in that colgroup can be specified through span attribute or by using the <col> element:
span="1" → 1 column
<col> → 1 column

Warning: use either col either span at a time (if both used, span is ignored).

About colgroup

Display & support colgroup

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children colgroup

The colgroup element is the second optional element inside table element (table's second child).

Attributes colgroup

Syntax colgroup

<colgroup> ... <⁄colgroup>
<colgroup> ...
... <⁄colgroup>
... » video

Attributes and Values colgroup (comma separated)

<colgroupattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.span=integer»video<colgroup span="2"> ... <⁄colgroup>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<colgroup accesskey="h"> ... </colgroup>
2.class=class name»html »img<colgroup class="class_name"> ... </colgroup>
3.contenteditable="",  , true, false »html<colgroup contenteditable="true"> ... </colgroup>
4.contextmenu=menu id value»html<colgroup contextmenu="menu_id_value"> ... </colgroup>
5.data-*= value -<colgroup data-http-error="404"> ... </colgroup>
6.dir=ltr, rtl, auto»html<colgroup dir="ltr"> ... </colgroup>
7.draggable= true,  , false»img<colgroup draggable="false"> ... </colgroup>
8.dropzone= copy, move, link, string:, file: -<colgroup dropzone="copy"> ... </colgroup>
9.hidden= "",  , hidden»html »img<colgroup hidden="hidden"> ... </colgroup>
10.id=id name»html »img<colgroup id="unique_id_name"> ... </colgroup>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<colgroup lang="en"> ... </colgroup>
17.spellcheck="",  , true, false»html<colgroup spellcheck="true"> ... </colgroup>
18.style=CSS property:value»html »img<colgroup style="color:red"> ... </colgroup>
19.tabindex= integer »img<colgroup tabindex="3"> ... </colgroup>
20.title=text»html »link»style »abbr»dfn
»img »meter
<colgroup title="html page"> ... </colgroup>
21.translate="", yes, no»html »img<colgroup translate="yes"> ... </colgroup>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration colgroup element

HTML5 colgroup element: group columns in a table

min video details
00:04 video tutorial: colgroup tag, grouping columns in a tabel
00:04 colgroup element allows you to group one or more columns in a group inside a table
00:13 adding colgroup element in page, inside table element
00:20 the number of columns to be grouped inside the colgroup element can be specified through col element
00:24 our table has 4 columns which can be grouped inside colgroup (colgroup = a column group)
00:30 let's group the first 2 columns in a first group
00:34 group = literally adding the col tag inside colgroup; 1 col = 1 colun; 2 col = 2 columns ...
00:39 and the next 2 columns in another group (a 2nd colgroup)
00:49 the 4 columns were grouped as follows
00:57 let's make visible the 2 groups of columns through CSS by adding a 6px border to each; by default the colgroup elements are not visible in browser
01:02 thus we have:
2 columns <col><col> grouped in the first colgroup &
2 columns <col><col> grouped in the second colgroup
01:08 we can group 3 columns in the first colgroup and 1 in the second
01:19 you can specify a unique style for each column <col>, BUT in case the same style applies to multiple columns, a group of columns, you can span those columns like this:

For more information about the colgroup element, please see the specs: W3CWHATWG