The <thead> tag is used to define a group header rows in an HTML table.
The <thead> element is used in conjunction with the <tbody> and <tfoot> tags in the table tag to specify each part of a table (header, body, footer).The <thead> tag have one or more and tags inside.It is an HTML5 tag.It has also opening and closing tags.
Optional Attributes :- align|valign|char|charoff
These attributes are not supported in HTML5.
align=left| center|right|justify|char ---- (horizontal alignment of cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells in group)
You can understand use of <thead> tag by a simple example:-
Conclusion:--
Optional Attributes :- align|valign|char|charoff
These attributes are not supported in HTML5.
align=left| center|right|justify|char ---- (horizontal alignment of cells in group)
char=Character---- (alignment character for cells)
charoff=Length ----(alignment character offset)
valign= top|middle|bottom|baseline---- (vertical alignment of cells in group)
You can understand use of <thead> tag by a simple example:-
e.g.1
<!DOCTYPE html>
<html>
<head>
<title>use of thead tag</title>
</head>
<body>
<table border="1" width="100%" align="center">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody> </table> </body> </html>
Result:-
e.g.2
<!DOCTYPE html>
<html>
<head>
<title>use of thead tag</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr> <tH>Weekday</tH> <tH>date</tH>
<tH>Manager</tH> </tr>
</thead>
<tbody>
<tr> <td>Monday</td> <td>04/06/2015</td> <td>Amit</td> </tr>
<tr> <td>tuesday</td> <td>04/07/2015</td> <td>rina</td> </tr>
<tr> <td>Wednesday</td> <td>04/08/2015</td> <td>Akshay</td> </tr>
<tr> <td>thursday</td> <td>04/09/2015</td> <td>Sunil</td> </tr>
<tr> <td>Friday</td> <td>04/10/2015</td> <td>rahul</td> </tr>
<tr> <td>Saturday</td> <td>04/11/2015</td> <td>Lokesh</td> </tr>
<tr> <td>Sunday</td> <td>04/12/2015</td> <td>Suman</td> </tr>
</tbody>
<tbody>
<tr> <td>Monday</td> <td>04/13/2015</td> <td>Amit</td> </tr>
<tr> <td>tuesday</td> <td>04/14/2015</td> <td>rina</td> </tr>
<tr> <td>Wednesday</td> <td>04/15/2015</td> <td>Akshay</td> </tr>
<tr> <td>thursday</td> <td>04/16/2015</td> <td>Sunil</td></tr>
<tr> <td>Friday</td> <td>04/17/2015</td> <td>rahul</td> </tr>
<tr> <td>Saturday</td> <td>04/18/2015</td> <td>Lokesh</td> </tr>
<tr> <td>Sunday</td> <td>04/19/2015</td> <td>Suman</td> </tr>
</tbody>
</table>
</body>
</html>
Result:-
<!DOCTYPE html>
<html>
<head>
<title>use of thead tag</title>
</head>
<body>
<table border="1" width="100%" align="center">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</tbody> </table> </body> </html>
Result:-
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 |
e.g.2
<!DOCTYPE html>
<html>
<head>
<title>use of thead tag</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr> <tH>Weekday</tH> <tH>date</tH>
<tH>Manager</tH> </tr>
</thead>
<tbody>
<tr> <td>Monday</td> <td>04/06/2015</td> <td>Amit</td> </tr>
<tr> <td>tuesday</td> <td>04/07/2015</td> <td>rina</td> </tr>
<tr> <td>Wednesday</td> <td>04/08/2015</td> <td>Akshay</td> </tr>
<tr> <td>thursday</td> <td>04/09/2015</td> <td>Sunil</td> </tr>
<tr> <td>Friday</td> <td>04/10/2015</td> <td>rahul</td> </tr>
<tr> <td>Saturday</td> <td>04/11/2015</td> <td>Lokesh</td> </tr>
<tr> <td>Sunday</td> <td>04/12/2015</td> <td>Suman</td> </tr>
</tbody>
<tbody>
<tr> <td>Monday</td> <td>04/13/2015</td> <td>Amit</td> </tr>
<tr> <td>tuesday</td> <td>04/14/2015</td> <td>rina</td> </tr>
<tr> <td>Wednesday</td> <td>04/15/2015</td> <td>Akshay</td> </tr>
<tr> <td>thursday</td> <td>04/16/2015</td> <td>Sunil</td></tr>
<tr> <td>Friday</td> <td>04/17/2015</td> <td>rahul</td> </tr>
<tr> <td>Saturday</td> <td>04/18/2015</td> <td>Lokesh</td> </tr>
<tr> <td>Sunday</td> <td>04/19/2015</td> <td>Suman</td> </tr>
</tbody>
</table>
</body>
</html>
Result:-
| Weekday | date | Manager |
|---|---|---|
| Monday | 04/06/2015 | Amit |
| tuesday | 04/07/2015 | rina |
| Wednesday | 04/08/2015 | Akshay |
| thursday | 04/09/2015 | Sunil |
| Friday | 04/10/2015 | rahul |
| Saturday | 04/11/2015 | Lokesh |
| Sunday | 04/12/2015 | Suman |
| Monday | 04/13/2015 | Amit |
| tuesday | 04/14/2015 | rina |
| Wednesday | 04/15/2015 | Akshay |
| thursday | 04/16/2015 | Sunil |
| Friday | 04/17/2015 | rahul |
| Saturday | 04/18/2015 | Lokesh |
| Sunday | 04/19/2015 | Suman |
Conclusion:--
So the <thead> tag is used to define a group header rows in an HTML table and used in conjunction with the <tbody> and <tfoot> tags in the table tag to specify each part of a table.
0 comments:
Post a Comment