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


td ... ⁄td


Share it

td intro td optional, occurrences td browser display td parents - children td syntaxtd, th, colspan, rowspan attributestd, th, headers attribute

HTML5 td element

The td element allows you to add data cells to rows, in a table. »video

About td

Display & support td

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children td

Attributes td

Syntax td

1
2
<td> ... </td>
<td>...» video

Attributes and Values td (comma separated)

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

HTML5 td element: add data cells (td) to rows in a table

min video details
00:05 video tutorial: td element
00:05 td element allows you to add data cells to rows inside a table
00:10 this table has 2 rows; we will add 2 data cells to each row: 2 td to each tr
00:30 empty cells
00:33 adding content to data cells
00:48 data cells inside a table:
cell 1 = first cell
cell 2 = the 2nd cell
..
00:51 let's check a complete example
01:00 we can see data cells (td) starting with the 2nd row of the table
(the first row contains header cells only: th)
01:07 identifying data cells in browser and their corresponding code

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