Introduction

In this article, you will see the use of the thead, tfoot and tbody tags of HTML5.

HTML <thead> Tag

The table heading code within the thead element will appear on each page above the table body. The HTML <thead> tag is used for adding a header to a table. The <thead> tag is used in conjunction with the <tbody> tag and the <tfoot> tag in determining each part of the table (header, footer, body). HTML5 did not allow <td> tag inside of <thead> tag.
Syntax
<table>
<thead> ... </thead>
</table>

HTML <tfoot> Tag

The <tfoot> tag is used to create a table footer in HTML. The <tfoot> tag is used in conjunction with the <thead> tag and the <tbody> tag in determining each part of the table (header, footer, body). <tfoot> must appear before <tbody> within a table, so that a browser can render the foot before receiving all the rows of data.
Syntax
The syntax of the <tfoot> tag is as:
<tfoot>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tfoot>

HTML<tbody> Tag

The HTML <tbody> tag is used for grouping table rows. The <tbody> tag is used in conjunction with the <thead> tag and the <tfoot> tag in determining each part of the table (header, footer, body). Browsers can use this information to enable scrolling of the table body independently of the header and footer - particularly useful for large tables. The <tbody> tag can contain zero or more <tr> elements.
Syntax
The syntax of the <tfoot> tag is as:
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
<tr>
<td>....</td>
<td>....</td>
</tr>
</tbody>
Now we create a table and use the tbody, thead and tfoot tags.

Creating a table with tbody, thead, and tfoot tag

For Example
  1. <html>
  2. <head>
  3. <title></title>
  4. </head>
  5. <body>
  6. <form id="form1" runat="server">
  7. <div>
  8. <table border = "1">
  9. <thead>
  10. <tr>
  11. <td colspan="2" style="color:green">Table Header </td>
  12. </tr>
  13. </thead>
  14. <tfoot>
  15. <tr>
  16. <td colspan="2" style="color:red">Table Footer </td>
  17. </tr>
  18. </tfoot>
  19. <tbody>
  20. <tr>
  21. <td style ="color :Orange">Body of the Table</td>
  22. <td>Cell 1 - part of tbody</td>
  23. <td>Cell 2 - part of tbody</td>
  24. <td>Cell 3 - part of tbody</td>
  25. <td>Cell 4 - part of tbody</td>
  26. <td>Cell 5 - part of tbody</td>
  27. <td>Cell 6 - part of tbody</td>
  28. </tr>
  29. </tbody>
  30. </table>
  31. </div>
  32. </form>
  33. </body>
  34. </html>
Internet explorer
image1.gif
Firefox
image2.gif