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++


Share it

col intro col browser display col parents col syntaxcol span attribute

HTML5 col element

The col element represents a column (col) within a column group (colgroup) in a table. »video

Multiple col elements inside a colgroup element represent multiple columns grouped inside that column group.

About col

Display & support col

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents col

Attributes col

Syntax col

1<col> »video

Attributes and Values col (comma separated)

<colattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.span=integer» video<col span="3">
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<col accesskey="h">
2.class=class name»html »img<col class="class_name">
3.contenteditable="",  , true, false »html<col contenteditable="true">
4.contextmenu=menu id value»html<col contextmenu="menu_id_value">
5.data-*= value -<col data-http-error="404">
6.dir=ltr, rtl, auto»html<col dir="ltr">
7.draggable= true,  , false»img<col draggable="false">
8.dropzone= copy, move, link, string:, file: -<col dropzone="copy">
9.hidden= "",  , hidden»html »img<col hidden="hidden">
10.id=id name»html »img<col id="unique_id_name">
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<col lang="en">
17.spellcheck="",  , true, false»html<col spellcheck="true">
18.style=CSS property:value»html »img<col style="color:red">
19.tabindex= integer »img<col tabindex="3">
20.title=text»html »link»style »abbr»dfn
»img »meter
<col title="html page">
21.translate="", yes, no»html »img<col translate="yes">
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 col element

HTML5 col element: add columns to a column group

min video details
00:04 video tutorial: col tag
00:04 col element represent a column inside a colgroup element (= inside a column group)
00:11 the table has 4 columns which can be rendered through 4 col elements inside colgroup element
00:19 4 columns
00:23 since col element does not display in browser, we applied a border on it to highlight it
00:26 we will group ⁄add 3 columns inside the first group of columns and 1 column inside the 2nd colgroup element
00:31 note: span attribute is not present on colgroup element → we can nest col element inside colgroup
00:51 thus we have 4 columns (4 col) grouped in 2 columns groups: 3 inside the first colgroup and 1 inside the 2nd colgroup
00:59 highlighting the colgroup elements; there are 2 inside table

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