search engine optimization articles do it yourself seo hiring search engine experts html and search engine optimization web site analysis and submission service

HTML tbody Tag Tutorial

Browser Support

Internet Explorer Firefox Opera Safari Chrome

The HTML tbody element is used to group the body content in an HTML table. The tbody element is used in conjunction with the thead and tfoot elements.

Note that you do not have to use the thead, tfoot, and tbody elements, but there are times when it's advantageous.

Table rows may be grouped into a table head, table foot, and one or more table body sections, using the thead, tfoot and tbody elements, respectively. Yes, as odd as it may seem at first, the tfoot element is coded before the tbody element.

Dividing the table into these three parts is supposed to allow a table to be a fixed height, and if there is more data than will fit in designated height, the body of the table could be scrolled independently of the table head and foot. The only trouble is, browser support isn't very good for the "scrolling" part of the idea at the time of this writing.

When long tables are printed, the table head and foot information may be repeated on each page that contains table data. If I recall correctly, that's part of the reason for having the tfoot coded before the tbody. I think the other reason is so a table with a lot of data can load the header and footer and have it in place while the rest of the table is being downloaded.

Note that the thead, tfoot, and tbody elements will not affect the layout of the table by default. However, you can use CSS to let these elements affect the table's layout.

Here's an example:

<table border="1">
       <th>header information...</th>
       <td>footer information...</td>
       <td> first row of block one data... </td>
       <td> second row of block one data... </td>
       <td> first row of block two data... </td>
       <td> second row of block two data... </td>
       <td> third row of block two data... </td>

Here's how that looks on a web page:

header information...
footer information...
first row of block one data...
second row of block one data...
first row of block two data...
second row of block two data...
third row of block two data...

Of course, you would probably want more than one table data cells in each row, and you may want to pretty it up some with CSS, but this shows you the basics.

Since browsers generally don't support the scrolling table body yet, the main reason to use the thead, tfoot, and tbody elements is to apply CSS to blocks of table content.

Based on your interest in this tutorial you may also be interested in:

This concludes the HTML Table tbody Tutorial.
Back | HTML Tag Chart | HTML Index | Web Design Tutorials
search engine optimization course
If you want your web site to rank high in the search engines . . . what are you going to do to get it there? Check out my search engine optmization guide, SEO for YOU: Search Engine Optimization for Ordinary Everyday People!

Check out SEO for YOU now!

Almost a Newsletter

Subscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:

First Name:

Privacy Policy

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)