| We covered many of the specific styles that can only be applied to tables in Chapter 9. However, tables can benefit from many other CSS properties. You can set common attributes (such as vertical alignment) and change them in a single place without having to go to every <table>, <tr>, and <td> tag and change them individually. CSS can do many things to make table layout easier. In this example (Figures 21.8 and 21.9), border, padding, text alignment, color, and background attributes are used to create a table that is more elegantly styled than the default. In addition, the :hover dynamic pseudo-class is used to highlight the table row being pointed at using the mouse. Figure 21.8. The ho-hum design with default table styles. 
Figure 21.9. The exciting new table designnow with bonus row highlighting! 
To style a table's elements: 1. | table {…}
You can style the table either directly through a type selector or by applying classes or IDs (Code 21.8). In this example, font styles have been applied directly to all tables on the page, while an ID (#dataTable01) is used to control a particular table's width.
Code 21.8. You can use CSS to style all of the different table elements and even use dynamic pseudo-classes (like :hover) to create an interactive interface for the data.| [View full width] <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Styling Tables</title> <style type="text/css" media="screen"> table { font: 1em helvetica, arial, sans-serif; } #dataTable01 { width: 400px; } tr { color: #333; background: #eee; } tr.oddRow { background: #ccc; } tr:hover { color: #000; background: #f99; cursor: pointer; } th { color: #fff; background-color: #000; text-align: left; padding: 5px; border-bottom: 1px solid #000; } td { padding: 5px; border-bottom: 1px solid #000; } </style> </head> <body> <table summary="Scores from the game" cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th scope="col">#</th> <th scope="col">Player</th> <th scope="col">Game 1</th> <th scope="col">Game 2</th> <th scope="col">Game 3</th> </tr> </thead> <tbody> <tr ><td>1</td><td>Alice</td><td>2</td><td>3</td><td>4</td> </tr> <tr ><td>2</td><td>Red Queen</td><td>4</td><td>6</td><td>8</td> </tr> <tr ><td>3</td><td>White Knight</td><td>6</td><td>9</td><td>12</td> </tr> <tr ><td>4</td><td>Tweedle Dum</td><td>8</td><td>12</td><td>16</td> </tr> <tr ><td>5</td><td>Tweedle Dee</td><td>10</td><td>15</td><td>20</td> </tr> </tbody></table> </body></html>
|
| | | 2. | tr {…}
In HTML, data cells are organized into rows using the <tr> element. Applying styles to it lets you create a style applied horizontally (styling columns is a lot trickier). You can also create specialized row styles using classes to alternate styles between rows.
In this example, I created TR.oddRow to give odd numbered rows a slightly darker background color. However, I did have to add the class to the HTML by hand.
| 3. | th {…}
The table header cell is a special cell used to hold labels that identify the data in a particular column or row of the table. You should generally style these to contrast the table data rows.
| 4. | tr:hover {…}
Beyond simple static style, you can also apply the :hover dynamic pseudo-class to table rows so that when the visitor rolls over the table, each row highlights independently. Keep in mind, though, that earlier versions of Internet Explorer (before version 7) will ignore this, so don't rely on it for critical information.
| 5. | td {…}
Finally, you can apply styles directly to the individual table data cells defined by the <td> element. As with table rows (see Step 3), you can also create specialized classes and apply the :hover dynamic pseudo-class.
|
 Tips
Without CSS, table borders are fairly boring, and must be set the same on all sides. With CSS, you can set the table borders on each side individually, greatly enhancing the design possibilities. CSS also lets you collapse the borders between table data cells (Chapter 9).
|
