th ... ⁄th

Share it

th intro th optional, occurrences th browser display th parents - children th syntax th, td colspan, rowspan attributes th, td, headers attribute

HTML5 th element

The th element allows you to add header cells to rows, in a table. »video

About th

is an optional element »examples
multiple th elements allowed per HTML5 document within the same table or within multiple tables »examples

Display & support th

display in browser »video

Parents, children th

th nested within elements »th parents
elements nested within th »th children
»examples

The th element is the first optional element within the tr element (tr's first child).

Attributes th

required: none
optional: specific attributes, global attributes, event attributes

Syntax th

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

Attributes and Values th (comma separated)

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

HTML5 th element: add header cells (th) to rows in a table

min	video details
00:02	video tutorial: th element
00:04	th element allows you to add header cells
00:09	the header cells can be added to rows (tr), inside the body, the head or inside the footer of a table
00:21	the head of the table
00:23	the body of the table
00:25	the footer of the table
00:29	adding header cells to the head of the table
01:01	a header cell (th)
01:04	a row (tr) of header cells (th) inside the head (thead) of the table (table)
01:08	this group of cells represents the head (thead) of the table (table)
01:11	adding header cells (th) to the body (tbody) of the table
01:29	header cells added to the body of the table
01:32	this group of cells represents the body (tbody) of the table (table)
01:35	adding header cells (th) to the footer (tfoot) of the table
01:44	it does not matter where the header cells are placed as long as they are inside a tr element and your table makes sense - could have been under the row that contains the td cells or - inside the row that contains the td, among the td cells
01:53	header cells added to the footer of the table

For more information about the th element, please see the specs: W3C ⁄ WHATWG