<thead><tfoot><tbody>

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The THEAD, TFOOT, and TBODY elements defines groups of table rows.


<thead></thead> : Defines a table header

<tfoot></tfoot> : Defines a table footer

<tbody></tbody> : Defines a table body

You can specify the following attributes for each group.

Attribute Value Explanation
align=" " horizontal alignment in cell
left aligns to the left
center aligns to the center
right aligns to the right
valign=" " vertical alignment in cell
top aligns to the top
middle aligns to the middle
bottom aligns to the bottom

The position where each element is placed

<table>
<caption>Table caption</caption>
<thead>
<tr>
<th>The header is placed on the first</th>
</tr>
</thead>
<tfoot>
<tr>
<td>The footer is placed on the second</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>The body is placed on the third</td>
</tr>
</tbody>
</table>

Example


<table border="1" width="100%">

<thead style="background-color: #80ffff">
<tr>
<th>Header cell</th>
<th>Header cell</th>
<th>Header cell</th>
</tr>
</thead>

<tfoot align="right" style="background-color: #c0c0c0">
<tr>
<td colspan="3">Footer cell</td>
</tr>
</tfoot>

<tbody align="center" style="background-color: #ffffff">
<tr>
<td>Row1 - Col1</td>
<td>Row1 - Col2</td>
<td>Row1 - Col3</td>
</tr>
<tr>
<td>Row2 - Col1</td>
<td>Row2 - Col2</td>
<td>Row2 - Col3</td>
</tr>
</tbody>

</table>
Output
Header cell Header cell Header cell
Footer cell
Row1 - Col1 Row1 - Col2 Row1 - Col3
Row2 - Col1 Row2 - Col2 Row2 - Col3 

<table border="1" style="width: 250px;">

<thead style="background-color: #80ffff;">
<tr>
<th>Header cell</th>
</tr>
</thead>

<tfoot style="background-color: #c0c0c0; text-align: right;">
<tr>
<td>Footer cell</td>
</tr>
</tfoot>

<tbody style="background-color: #ffffff; text-align: center; max-height: 100px; overflow: auto;">
<tr>
<td>Row1</td>
</tr>
<tr>
<td>Row2</td>
</tr>
<tr>
<td>Row3</td>
</tr>
<tr>
<td>Row4</td>
</tr>
<tr>
<td>Row5</td>
</tr>
<tr>
<td>Row6</td>
</tr>
<tr>
<td>Row7</td>
</tr>
</tbody>

</table>
Output

Screen shot in Firefox
Firefox Screen Shot

Real table
Header cell
Footer cell
Row1
Row2
Row3
Row4
Row5
Row6
Row7