Making the Most of the Grouping Tags

You may be wondering what good are the HTML grouping tags: col, colgroup, thead, tfoot, and tbody. After all, these tags don't add any content to the table. The col and colgroup tags simply describe the structure of the columns in the table, and the thead, tfoot, and tbody tags mark off the table's sections. Why go to the trouble of coding this information into a table in the first place?

TIP

When you use col and colgroup tags with thead, tfoot, and tbody tags in the same table, the Netscape browser gets fussy and doesn't always apply the col and colgroup attributes. One easy way to solve this problem is not to use col and colgroup with thead, tfoot, and tbody. Pick one group of tags or the otherwhichever makes more sense for your particular data table.

Not only do the grouping tags improve the accessibility of your table by describing its structure in detail, they give you some handy formatting shortcuts. Take the table in Figure 56.1 as an example. Let's say that you want to align the content to the right in every table cell of the first column. You don't have to fuss with:

 <td align="right"> 

in each table cell. Simply specify the align attribute once, in the col tag:

 <col align="right"> 

Better, give the alignment as a CSS style definition:

 <col style="text-align: right;"> 

This shortcut works with the colgroup tag, too:

 <colgroup span="6" style="text-align: center;"></colgroup> 

Add width attributes to specify the horizontal size of the columns:

 <col style="text-align: right; width: 75px;"> <colgroup span="6" style="text-align: center; width: 100px;"></colgroup> 

You can also apply HTML attributes and CSS style definitions to the thead, tfoot, and tbody sections:

[View full width]
 <thead style="font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style:  italic;">   <!-- Content goes here --> </thead>