Terrific Tables with CSS

The caption Element

A caption is intended to display a summary of what the table is about and, by default, it appears centered above the table as seen in Figure 3. A caption doesn’t have any special attributes, which makes our styling fairly straightforward.

The caption element appears right after the <table> tag:

<table frame="hsides" rules="groups">  
 <caption>Sites that I like to visit</caption>  
 &hellip;

Figure 3. Default display of the caption element in Firefox

The thead, tbody, and tfoot Elements

The thead, tbody, and tfoot elements are called row groups. Their function is to group bunches of rows together. A table can have only one thead and one tfoot, but it can have multiple tbody elements. Here’s an example to demonstrate the intended use of these elements:

Example 2. table-example.html (excerpt)

<table frame="hsides" rules="groups">  
 <caption>Sites that I like to visit</caption>  
 <thead>  
   <tr>  
     <th scope="col">Person</th>  
     <th scope="col">URL</th>  
   </tr>  
 </thead>  
 <tfoot>  
   <tr>  
     <td colspan="2">[1] Enjoys Dance Dance Revolution</td>  
   </tr>    
 </tfoot>  
 <tbody>  
   <tr>  
     <td>Bryan Veloso [1]</td>  
     <td><a href="http://avalonstar.com/">Avalonstar</a></td>  
   </tr>  
   <tr>  
     <td>Dan Rubin</td>  
     <td><a href="http://superfluousbanter.org/">  
       SuperfluousBanter</a></td>  
   </tr>  
 </tbody>  
</table>

As you might notice from this example, the footer actually appears before the body. Take a look at Figure 4 to see how it looks in the browser, though, and you’ll notice that the footer is positioned at the end of the table, where it belongs. “What gives?” you ask, quite reasonably. The specification was designed this way to allow a table to be rendered before the entire body of content was received.

Figure 4. tfoot displayed at end of table, despite source order

All row groups support the align and valign attributes. The align attribute adjusts the horizontal alignment whereas valign handles the vertical alignment. Don’t worry too much about these attributes, as we’ll handle them in CSS using the text-align and vertical-align properties.

The tr Element

A tr is a table row. Rows are much like row groups, in that they both support align and valign attributes. Table rows also have the bgcolor attribute that allows a background color to be set. Again, we’ll handle this step in CSS.

The th and td Elements

The th and td elements are the table cells, and hold the data for the table. Table cells have a congregation of attributes, many of which are important not only from a style perspective, but also from an accessibility standpoint.

Like the row and row groups, table cells have align and valign attributes, as well as rowspan and colspan attributes. The rowspan attribute indicates how many rows high the cell should be, including the current cell. The colspan is very similar, concerned with—you guessed it—the width of the columns. Check out Figure 5 to see how columns and rows can be spanned.

Figure 5. colspan and rowspan attributes at work

Now here’s the markup that produces this figure:

Example 3. colspan-rowspan.html (excerpt)

 
<table>  
 <thead>  
   <tr>  
     <th scope="col">Header</th>  
     <th scope="col">Header</th>  
     <th scope="col">Header</th>  
     <th scope="col">Header</th>  
   </tr>  
 </thead>  
    <tbody>  
      <tr>  
        <td rowspan="6">You can span down.</td>  
      </tr>  
      <tr>  
        <td colspan="3">You can span across.</td>  
      </tr>  
      <tr>  
        <td colspan="2">It’s like a puzzle.</td>  
        <td rowspan="4">Over here.</td>  
      </tr>  
      <tr>  
        <td rowspan="3">This way.</td>  
      </tr>  
      <tr>  
        <td>That way.</td>  
      </tr>  
      <tr>  
        <td>Where am I?</td>  
     </tr>  
 </tbody>  
</table>        

The th element may also contain the axis, headers, scope, and abbr attributes, each of which allow you to create relationships between the various cells. Screenreaders can use some of these attributes to improve a reader’s ability to navigate the table. It’s difficult to target specific elements via the presence of these attributes, due to browser support for some CSS selectors, but I mention them here for the sake of completeness. If you’d like to learn more about these attributes, check out the W3C CSS3 specification.