Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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


RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268