166
Creating Cool Web Sites with HTML, XHTML, and CSS
<head>
<title>Colorful tables</title>
<style type=”text/css”>
.title { background-color: #006; color: white; }
th { background-color: yellow; }
</style>
</head>
<body style=’text-align:center’>
<table border=”5” width=”75%”>
<tr class=”title”>
<td colspan=”2” align=”center”>
<span style=’font-size:125%;’>
Arts &amp; Entertainment Network</span>
</td>
</tr><tr>
<th>Show</th><th>Airs on</th>
</tr>
<tr align=”center”>
<td>Sherlock Holmes</td><td>Monday</td>
</tr>
<tr align=”center”>
<td>Lovejoy</td><td bgcolor=”#99ff99”>Monday</td>
</tr>
</table>
</body>
The result of this formatting is quite attractive, as shown in Figure 8-7, and it’s even more attractive when you can see it in color!
Figure 8-7: Table cells colored by using both CSS and the <td> tag.
In this code, the style block creates a class called title that has a dark blue background and white text, and then it redefines the table head (th) tag to have a yellow background. Then, in the table itself, the title class is applied to the first row by adding class=”title” to the tr tag. Finally, the light green background in the bottom-right data cell is done with an old-fashioned bgcolor attribute, which works just as well.