Menu
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

  BostonChicago Dallas Denver Fargo HoustonMemphis
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.

  BostonChicago 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
• Divide a Table Into Head (thead), Body (tbody), and Footer (tfoot) Sections
• Text Input Box Basics
• HTML SPAN Basics
• Setting the Number of Items Visible in a Select List
• HTML Definition List
• Wrapping Text Around Images
• Easy Form Design
• HTML5 Input Type - Email
• HTML5 role Attribute