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

table ... ⁄table

Share it

table intro table browser display table parents - children table syntaxtable border attribute

HTML5 table element

The table element allows you to render tables in your HTML document. »video

About table

Display & support table

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children table

Attributes table

Syntax table

1<table> ... </table> »video

Attributes and Values table (comma separated)

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

HTML5 table element: render tables

min video details
00:04 video tutorial: rendering a table in our html page
00:10 like this one; we will recreate this table from scratch
00:17 we will start by adding the table element in page which acts like a container, since it will contain all other elements needed
00:33 our container is empty → nothing to display in browser
00:38 "Moon Phases, March and April, 2013" represents the caption of the table, which can be added in page through caption element;
note: caption element is optional
00:39 recreating this table
01:01 this represents the head of the table and can be added in page through thead element;
note: thead is optional
01:16 this represents the body of the table and can be added in page through tbody element
note: tbody is optional; when absent, tr element must be present as child of the table element
01:19 this represents the footer of the table and can be added in page through tfoot element
note: tfoot is optional
01:37 thead, tbody and tfoot don't display in browser
01:42 thead element contains: 1 row (1 tr element) with 4 header cells (4 th elements)
02:29 our table's header displays in browser
02:34 tbody element contains 2 rows (2 tr elements) with 4 cells each (4 td elements)
03:20 the 2 rows with 4 cells each displays, but the cells are empty for now
03:31 adding content inside the cells
03:59 the body of our table displays in browser
04:04 tfoot element contains 1 row (1 tr element) with 4 cells (4 th elements)
04:36 the footer of our table displays also
04:41 we recreated the table

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