Modifying the Appearance of Tables | Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

In Lesson 8, "Building Tables," I discussed the creation of tables. In it, I touched on ways that you can use CSS to improve how your tables look. Now I'm going to explain how you can use the CSS properties I've discussed to really spruce up your tables. Ironically, the main goal of today's lesson is to show you that there are alternatives to using tables to lay out complex pages. Right now, I'm going to also demonstrate how to use CSS to improve the presentation of tabular data. As a refresher, take a look at one of the tables I created in Lesson 8 in Figure 9.21.

Figure 9.21. One of the tables from Lesson 8.

Now I'm going to replace many of the formatting changes made to the table using HTML with CSS. The source code for the new page (see Figure 9.22 for the result) follows:

Input

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Service Data</title> <style type="text/css"> td, th { padding: 5px;      border: 1px solid #c90;      background-color: #ffc;      text-align: center;      margin: 0px; } th.emtpy { background-color: #fff;       border-left: none;       border-top: none; } .left { text-align: left; } table { border: 5px groove #c90; } caption { font: bold 18px Verdana; margin: 10px; } </style> </head> <body> <table cellspacing="0"> <caption>Drive Belt Deflection</caption> <tr> <th rowspan="2" colspan="2" ></th> <th colspan="2">Used Belt Deflection</th> <th rowspan="2">Set<br /> deflection<br /> of new belt</th> </tr> <tr> <th>Limit</th> <th>Adjust<br /> Deflection</th> </tr> <tr> <th rowspan="2" >Alternator</th> <td >Models without AC</td> <td>10mm</td> <td>5-7mm</td> <td rowspan="2">5-7mm</td> </tr> <tr> <td >Models with AC</td> <td>12mm</td> <td>6-8mm</td> </tr> <tr> <th colspan="2" >Power Steering Oil Pump</th> <td>12.5mm</td> <td>7.9mm</td> <td>6-8mm</td> </tr> </table> </body> </html>

Output

Figure 9.22. The table from Figure 9.21 formatted using CSS.

Given the size of the style sheet, we haven't gained a whole lot in terms of efficiency by using CSS for formatting. However, there are some things that can be accomplished using CSS that cannot be accomplished using regular table formatting attributes. First, though, as you can see, I used CSS to set the background colors for my table cells and to handle the alignment tasks for the table. Because nearly everything in the table is centered, I made that the default for all <td> and <th> tags. I put the cells that need to be left aligned in the class left and changed its alignment to left.

One thing I could accomplish using CSS that isn't possible without it is to use a different border for the outside of the table than I used inside. For the border between the cells, I used a thin 1-pixel border. Around the table, I used a 5-pixel grooved border. I also turned off the top and left borders for the empty cell, along with setting its background color to white. You should note that one thing I didn't change was the cellspacing attribute of the <table> tag. If you want to modify cell spacing, you must use this attribute because there's no CSS equivalent.