|Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects | Member Perks | Member Login|
HTML tbody Tag Tutorial
Browser SupportThe 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"> <thead> <tr> <th>header information...</th> </tr> </thead> <tfoot> <tr> <td>footer information...</td> </tr> </tfoot> <tbody> <tr> <td> first row of block one data... </td> <tr> <td> second row of block one data... </td> </tbody> <tbody> <tr> <td> first row of block two data... </td> <tr> <td> second row of block two data... </td> <tr> <td> third row of block two data... </td> </tbody> </table>
Here's how that looks on a web page:
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.
Check out SEO for YOU now!
Almost a NewsletterSubscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:
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 ]
Home | Web Design Tutorials | Free Graphics | Newsletter | Products | Specials | SEO | Sound Effects