thead, tfoot, and

 < Day Day Up > 



<thead>, <tfoot>, and <tbody>

There are three additional elements related to tables that I'd like to mention. Not only do they provide extra semantic meaning to the structure of a table—at the same time they provide additional elements for CSS rules to take advantage of, avoiding the need to add extra classes to <tr> elements for styling table rows.

To quote the W3C's HTML 4.01 specification on these elements (http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3):

"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. This division enables user agents to support scrolling of table bodies independently of the table head and foot. When long tables are printed, the table head and foot information may be repeated on each page that contains table data."

So you can see that organizing a table this way can also be useful for browsing software that supports independent scrolling of <tbody> sections—and especially helpful for longer tables.

<thead> and <tfoot> elements must appear above <tbody> sections to allow for browsers and devices to load that content first. An example of a table marked up with grouped table rows may go something like this:

 <table>   <thead>     <tr>       ...table header content...     </tr>   </thead>   <tfoot>     <tr>       ...table footer content...     </tr>   </tfoot>   <tbody>     <tr>       ...table data row...     </tr>     <tr>       ...table data row...     </tr>     <tr>       ...table data row...     </tr>   </tbody> </table> 

You can see that both the header and footer information gets placed before the data rows hen using <thead> and <tfoot>.

As I mentioned earlier, not only do these elements provide extra meaning to a table, but hey also give us a few more "style hooks" to apply CSS to, without adding extraneous lasses to any of the <tr> elements.

For instance, if we wished to give only the data sections (marked up with <tbody>) a different background color than the other sections, we could write one CSS rule to handle this:

 tbody {   background-color: gray;   } 

Without the <tbody> element, we would've had to add a class attribute to each <tr> element that we wished to have a gray background. A fine example of how meaningful arkup can oftentimes lead to easier styling with CSS later on.



 < Day Day Up > 



Web Standards Solutions. The Markup and Style Handbook
Web Standards Solutions: The Markup and Style Handbook (Pioneering Series)
ISBN: 1590593812
EAN: 2147483647
Year: 2003
Pages: 119
Authors: Dan Cederholm

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net