What is HTML <thead> tag ?
HTML <thead> tag is used to add a header to a table that containing header information of the table.
HTML <thead> is used in conjunction with the <tfoot> and <tbody> elements that specifies table footer, table body respectively.
Note : HTML <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements (see example below)!
Note : HTML <tfoot> tag must be placed before <tbody>, so that the browser can render the table footer correctly.
HTML <thead>, <tbody>, and <tfoot> elements do not affect the table layout by default.
We can use CSS properties to customize the look of the table.
How HTML <thead> tag works ?
HTML <thead> element defines a set of rows defining the head of the columns of the table.
HTML <thead> tag must be child of <table> element, and it must be used before any <tbody>, <tr>, or <tfoot> elements.
Browsers can use this <thead> information to enable scrolling of the table body independently of the header and footer(when we use for large tables).
Note: HTML <thead> element must have one or more <tr> tags inside.
Why HTML <thead> tag is used ?
HTML <thead> tag is used along with <tbody> and <tfoot> tags, that specify the body and footer of the table, respectively.
Note : HTML <thead> tag must be used in the following context:
As a child of a <table> element, after any <caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.
HTML beginners tutorial !!!
Click to Learn More about – HTML Tutorial for beginners
Syntax :
<thead>
// Table head Contents...
</thead>
Example :
<!DOCTYPE html>
<html>
<head>
<title>Table Head Tag</title>
</head>
<body>
<center>
<h1>Welcome to CSTechbook</h1>
<h2>thead Tag</h2>
<style>
table, th, tr{
width:50%;
border:1px solid blue;
border-collapse:collapse;
padding:5px;
text-align:center;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<!-- tbody tag starts from here -->
<tbody>
<tr>
<td>Mahatma Gandhi</td>
<td>78</td>
</tr>
<tr>
<td>Abdul Kalaam</td>
<td>83</td>
</tr>
<tr>
<td>Sachin Tendulkar</td>
<td>48</td>
</tr>
<tr>
<td>Rahul Dravid</td>
<td>47</td>
</tr>
</tbody>
<!-- tbody tag ends here -->
<!-- tfoot tag starts from here -->
<tfoot>
<tr>
<td>Total Members</td>
<td>4</td>
</tr>
</tfoot>
<!-- tfoot tag ends here -->
</table>
</center>
</body>
</html>
Output :
![](https://s30.e0b.myftpupload.com/wp-content/uploads/2021/08/htmltags-110-example1-cc-1024x281.png)
<thead> Tag Attributes
HTML <thead>
tag support following specific attributes.
All following attributes has been removed in HTML5.
Sno | Attributes | Value | Description |
---|---|---|---|
1 | align | left right center justify char | Deprecated. Specifies the alignment of the <tfoot> element contents. |
2 | char | character | Deprecated. Specifies the alignment of the specific character. This attribute used only with when align=”char”. |
3 | charoff | pixels % | Deprecated. Specifies the number of characters to offset the <tfoot> content from the character designated by the char attribute. |
4 | valign | top middle bottom baseline | Deprecated. Specifies the vertical aligns of the contents inside the <tfoot> element. |
Global Attributes
HTML <thead>
tag support following global attributes.
Sno | Attributes | Value | Description |
---|---|---|---|
1 | id | unique_name | Declared unique id for an element. |
2 | class | class_name | Declared one or more classnames for an element. |
3 | style | styles | CSS inline styles specify an element. |
4 | title | title | Specify extra details of element contain, this will display as a “tooltip” for an elements. |
Event Attributes
HTML <thead>
tag support following event attributes.
Sno | Attributes | Value | Description |
---|---|---|---|
1 | onfocus | script | element gets focus on object when script tobe run. |
2 | onblur | script | element lose the focus on object when scrip tobe run. |
3 | onabort | script | element gets aborted on object when script tobe run. |
4 | onchange | script | element gets anytime change on object when script tobe run. |
5 | onbeforeunload | script | element gets unloaded on object when scrip tobe run. |
6 | onclick | script | clicked on object when script tobe run. |
7 | ondblclick | script | double click on object when script tobe run. |
8 | onkeydown | script | key is pressed when script tobe run. |
9 | onkeypress | script | key is pressed over element then released when script tobe run. |
10 | onkeyup | script | key is released over element when script tobe run. |
11 | onmousedown | script | mouse button was pressed over an element when script tobe run. |
12 | onmouseout | script | mouse pointer release over an element when script tobe run. |
13 | onmousemove | script | run mouse pointer moved when script tobe run. |
14 | onmouseover | script | run mouse pointer move over when script tobe run. |
15 | onmouseup | script | mouse button is released when script tobe run. |
16 | onreset | script | form has been reset when script tobe run. |
17 | onselect | script | Select some content when script tobe run. |
18 | onsubmit | script | form has been submitted when script tobe run. |
19 | onload | script | object has load when script tobe run. |
20 | onchange | script | allow to change the object when script tobe run. |
21 | onunload | script | unload to the browser window when script tobe run. |
22 | ondrag | script | element being dragged when script tobe run. |
23 | ondragend | script | element being stop dragged when script tobe run. |
24 | ondragenter | script | element being go target dragged when script tobe run. |
25 | ondragleave | script | element being leave to target dragged when script tobe run. |
26 | ondragover | script | element being over to target dragged when script tobe run. |
27 | ondragstart | script | element being start dragged when script tobe run. |
28 | ondrop | script | element being dropped when script tobe run. |
29 | onerror | script | element error occurs when script tobe run. |
30 | onmessage | script | element message display when script tobe run. |
31 | onerror | script | element error occurs when script tobe run. |
32 | onmousewheel | script | mouse wheel will be rotate when script tobe run. |
33 | onscroll | script | scrollbar is scroll when script tobe run. |
34 | onresize | script | element should be resize when script tobe run. |
35 | onselect | script | all element content selected when script tobe run. |
36 | onstorage | script | element should be store in target when script tobe run. |
Browser Compatibility
Sno | Browser | Support |
1 | Chrome | Yes |
2 | Firefox | Yes |
3 | Edge | Yes |
4 | Opera | Yes |
5 | Safari | Yes |
6 | Internet Explorer | Yes |