Terrific Tables with CSS

The col and colgroup Elements

I’ve saved the best for last! col is used to identify a column; colgroup identifies groups of columns. As far as styling is concerned, the greatest benefit of these two elements is that they allow us to style entire columns without resorting to the addition of a class to every cell in the column.

Spanning can be assigned to our colgroup elements and col elements. This assignation doesn’t actually collapse multiple cells into one, as would the rowspan or colspan attributes on a cell. It simply provides a shorthand way of specifying attributes to be applied across multiple columns:

<colgroup>  
 <col />  
 <col />  
</colgroup>  
<colgroup>  
 <col />  
 <col />  
 <col />  
</colgroup>

This can also be written as follows:

<colgroup span="2" />  
<colgroup>  
 <col span="2" />  
 <col />  
</colgroup>

The span attribute on the colgroup indicates that the colgroup spans two columns. The col elements aren’t used when a span attribute is present on a colgroup. If col elements do exist in a colgroup, the span attribute on the colgroup is ignored. The span attribute on the col element also indicates that there are two columns.

The width attribute can be specified using one of the three formats:

• width="100"-- width in pixels
• width="20%" -- width in percentage
• width="2*" -- relative width indicating that the cell should be twice as wide as a regular cell. (This relative sizing doesn’t work in Internet Explorer or Opera, so it’s best avoided.)

Using a percentage or relative width in Internet Explorer expands the overall table to 100%, whereas Firefox, Safari, and Opera collapse to the smallest area required to fill the cells—the expected behavior.

Here’s an example that demonstrates a number of the structural attributes we’ve just covered, including how it is displayed in Firefox (the end result of which you can see in Figure 6):

Example 4. growth-chart.html (excerpt)

<table>  
 <caption>Growth Chart</caption>  
 <col width="60%">  
 <col width="20%">  
 <col width="20%">  
 <thead>  
   <tr>  
     <th scope="col">Name</th>  
     <th scope="col">Age</th>  
     <th scope="col">Height</th>  
   </tr>  
 </thead>  
 <tfoot>  
   <tr>  
     <td colspan="3">[1] Has <a    
 href="http://en.wikipedia.org/wiki/Gigantism">  
 Gigantism</a></td>  
   </tr>  
 </tfoot>  
 <tbody>  
   <tr>  
     <th rowspan="3" align="left">Albert</th>  
     <td>1</td>  
     <td align="center">2 ft. 8 in.</td>  
   </tr>  
   <tr>  
     <td>10</td>  
     <td align="center">4 ft. 6 in.</td>  
   </tr>  
   <tr>  
     <td>20</td>  
     <td align="center">6 ft. 1 in.</td>  
   </tr>  
 </tbody>  
 <tbody>  
   <tr>  
     <th rowspan="3" align="left">Betty [1]</th>  
     <td>1</td>  
     <td align="center">2 ft. 3 in.</td>  
   </tr>  
   <tr>  
     <td>10</td>  
     <td align="center">4 ft. 2 in.</td>  
   </tr>  
   <tr>  
     <td>20</td>  
     <td align="center">7 ft. 2 in.</td>  
   </tr>  
 </tbody>  
</table>

Figure 6. Preceding markup as rendered by Firefox

You’ve endured the slow, steep ascent and learned how to create a table; it’s almost time for that roller-coaster ride I promised at the start of the chapter! We’ll plunge into that styling right after we have a look at the CSS properties we need.