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

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

	Boston	Chicago	Dallas	Denver	Fargo	Houston	Memphis
Boston		983	1764	1970	1629	1844	1312
Chicago	983		926	1002	641	1085	531
Dallas	1764	926		880	1079	228	453
Denver	1970	1002	880		873	1097	22069
Fargo	1629	641	1079	873		1321	1054
Houston	1844	1085	228	1035	1321		575
Memphis	1312	531	453	1097	1054	575
Mileage Between 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.

	Boston	Chicago	Dallas	Denver	Fargo	Houston	Memphis
Boston		983	1764	1970	1629	1844	1312
Chicago	983		926	1002	641	1085	531
Dallas	1764	926		880	1079	228	453
Denver	1970	1002	880		873	1097	22069
Fargo	1629	641	1079	873		1321	1054
Houston	1844	1085	228	1035	1321		575
Memphis	1312	531	453	1097	1054	575
Mileage Between Cities

<style type="text/css">

.myTable
{
width:450px;
border: 1px solid black;
border-collapse:collapse;
}
.myTable td
{
border: 1px solid black;
font-family:verdana;
font-size:14px;
width:60px;
}

.myThead
{
border: 1px solid black;
background-color:#aaaaff;
}
.myThead td
{
border: none;
}

.myTfoot
{
background-color:#aaaaff;
}
.myTfoot td
{
width:450px;
text-align: center;
}
</style>

<table class="myTable">

<thead class="myThead">
<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>
</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 class="myTfoot">
<tr><td colspan="8" align="center">Mileage Between Cities</td></tr>
</tfoot>

</table>

Note in the style code that I applied the class myTable to the entire table. I applied the class myThead to the <thead> section of the table, to to give it a light-blue background color and over-ride the border style rule of the myTable class to eliminate the borders between cells in the <thead> section.

I applied the class myTfoot to the <tfoot> section of the table to give it a light-blue background color. Note that I had to add the width rule because Internet Explorer can't see the columns in the table body, and I added the html colspan and align attributes because Firefox can't figure out what the style rules width and text-align mean.

And that's an example of the problems you have to put up with when you use CSS - incompatibilities. And just trying to make it work in two different browsers, image the incompatibilities id I tried for the others. The problem is, you have the Internet Explorer way, the Firefox way, and then the W3C standards way. Both Internet Explorer and Firefox are equally defective in my opinion, and the problem can't be fixed by standards because - guess what - standards are designed by committee.

Learn more at amazon.com

More HTML Code:
• How to Troubleshoot an HTML Table
• HTML Numbered or Ordered List
• Aligning an Image on Your Web Page
• HTML title Tag
• Radio Button Basics
• Keywords Meta Tag Generator
• HTML Definition List
• How to Use a Meta Redirect
• The Heading Tags
• Block and Inline HTML Elements