Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections

By Stephen Bucaro

As you may already know, an html table is constructed of <tr> (table row) and <td> (table data (actually table cell or table column) elements. The intent of the table head <thead>, table body <tbody>, and table foot <tfoot> elements was to allow the creation of a table where the contents of the table could scroll while the table's header and footer remained in place. Unfortunately, as of this writing, neither of the popular browsers (Internet Explorer and Firefox) supports this feature.

Shown below is an example of the use of the <thead>, <tbody>, and <tfoot> elements to divide a table into sections. It's a table of the mileage between various cities

<table border="1">

<thead bgcolor="#aaaaff">
<tr><td>	 	</td><td>Boston</td><td>Chicago	</td><td>Dallas	</td><td>Denver	</td><td>Fargo	</td><td>Houston</td><td>Memphis</td></tr>
</thead>

<tbody>
<tr><td>Boston	</td><td> 	</td><td>983	</td><td>1764	</td><td>1970	</td><td>1629	</td><td>1844	</td><td>1312	</td></tr>
<tr><td>Chicago	</td><td>983	</td><td> 	</td><td>926	</td><td>1002	</td><td>641	</td><td>1085	</td><td>531	</td></tr>
<tr><td>Dallas	</td><td>1764	</td><td>926	</td><td> 	</td><td>880	</td><td>1079	</td><td>228	</td><td>453	</td></tr>
<tr><td>Denver	</td><td>1970	</td><td>1002	</td><td>880	</td><td> 	</td><td>873	</td><td>1097	</td><td>22069	</td></tr>
<tr><td>Fargo	</td><td>1629	</td><td>641	</td><td>1079	</td><td>873	</td><td> 	</td><td>1321	</td><td>1054	</td></tr>
<tr><td>Houston	</td><td>1844	</td><td>1085	</td><td>228	</td><td>1035	</td><td>1321	</td><td> 	</td><td>575	</td></tr>
<tr><td>Memphis	</td><td>1312	</td><td>531	</td><td>453	</td><td>1097	</td><td>1054	</td><td>575	</td><td> 	</td></tr>
</tbody>

<tfoot bgcolor="#aaaaff">
<tr><td colspan="8" align="center">Mileage Between Cities</td></tr>
</tfoot>

</table>

Note that I used the bgcolor attribute in the <thead> and <tfoot> elements to give them a light-blue background. In the <tfoot> I used the colspan attribute to make the <tfoot>'s single cell span across the entire table, and I used the align attribute to center the text in that cell.

This is keeping with the use of 100 percent html, no CSS (Cascading Style Sheets). However, if you don't mind applying a few style rules, you can give your table a much nicer appearance as shown below.

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues