Post
Ask Question

HTML5 tbody, thead and tfoot tags

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


Similar Articles