157Tabular Data How do I change a row’ s background color when the cursor hovers over it? Solution One way to boost the readability of tabular data is to change the color of the rows as users move the cursor over them, to highlight the row they’re reading. This can be seen in Figure 5.10. Figure 5.10. Highlighting a row on mouse over This can be a very simple solution; all you need to do to create this effect is add the following rule to your CSS: chapter05/alternate.css (excerpt) .datatable tr:hover { background-color: #DFE7F2; color: #000000; } Job done! Discussion This solution will work in all modern browsers, including Internet Explorer 7—but it will fail to work in Internet Explorer 6. However, as long as your tables are clear Download at WoweBook.Com The CSS Anthology158 without this highlighting effect in place, the highlight feature could be regarded as a “nice to have,” rather than a necessary tool without which the site will be unusable. If you must make this feature work for Internet Explorer 6 users, you can use some simple JavaScript to implement the effect. To change a row’s background color when the cursor moves over it in Internet Explorer 6 and earlier, you must first apply the desired style properties to a CSS class, which I’ve named hilite in this example: chapter05/hiliterow.css (excerpt) .datatable tr:hover, .datatable tr.hilite { background-color: #DFE7F2; color: #000000; } Then, add the following JavaScript code to your page after the table: chapter05/hiliterow.html (excerpt) <script type="text/javascript"> var rows = document.getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { rows[i].onmouseover = function() { this.className += ' hilite'; } rows[i].onmouseout = function() { this.className = this.className.replace('hilite', ''); } } </script> This code locates all the <tr> tags in the document and assigns a mouseover and mouseout event handler to each. These event handlers apply the CSS hilite class to the rows when the cursor moves over them, and removes it when the cursor moves away. As you can see in Figure 5.11, this combination of CSS and HTML produces the desired effect. Download at WoweBook.Com 159Tabular Data Figure 5.11. Highlighting a row in Internet Explorer 6 with the help of JavaScript The JavaScript code works by setting a tag’s CSS class dynamically. In this case, we add the hilite class to a <tr> tag when the mouseover event is triggered, as captured by the onmouseover property: chapter05/hiliterow.html (excerpt) rows[i].onmouseover = function() { this.className += ' hilite'; } We then remove the class when the mouseout event is fired: chapter05/hiliterow.html (excerpt) rows[i].onmouseout = function() { this.className = this.className.replace('hilite', ''); } You can create very attractive, subtle effects by changing the class of elements in response to user actions using JavaScript. Another way in which you could use this technique would be to highlight a content area by changing the class applied to a div when the mouseover event for that element is triggered. Download at WoweBook.Com The CSS Anthology160 Unobtrusive JavaScript You may have noticed that there was no JavaScript added to the table itself; instead, we did our work within the script element only. This technique is called unob- trusive JavaScript; it aims to keep JavaScript separate from your document in the same way that we keep the presentation of CSS separate from the markup. The JavaScript needs to run after the table has loaded, because until that point, there are no rows for the JavaScript to work on. Another approach would be to write a function that runs when the page has completed loading —this would mean that you could keep the JavaScript in a separate file that’s linked to from your page. You may also consider using conditional comments so that the JavaScript is only loaded when the page is viewed in IE6, but more about that in the section called “How can I specify different styles for Internet Explorer 6 and 7?” in Chapter 7. As with the previous example, libraries such as jQuery that have support for more advanced selectors can be a great way to plug the gaps where older browsers lack support. How do I display table columns in alternating colors? While alternate row colors are quite a common feature of data tables, we see altern- ately colored columns less frequently. However, they can be a helpful way to show groupings of data. Solution If we use the col element to describe our table’s columns, we can employ CSS to add a background to those columns. You can see the col elements I’ve added—one for each column—in the table markup below. I’ve also added classes to them in much the same way that we added a class to the table’s rows in “How do I display table rows in alternating colors?”: Download at WoweBook.Com 161 Tabular Data chapter05/columns.html (excerpt) <table class="datatable"> <col class="odd" /> <col class="even" /> <col class="odd" /> <col class="even" /> <tr> <th>Pool A</th> <th>Pool B</th> <th>Pool C</th> <th>Pool D</th> </tr> <tr> <td>England</td> <td>Australia</td> <td>New Zealand</td> <td>France</td> </tr> <tr class="even"> <td>South Africa</td> <td>Wales</td> <td>Scotland</td> <td>Ireland</td> </tr> <tr> <td>Samoa</td> <td>Fiji</td> <td>Italy</td> <td>Argentina</td> </tr> <tr class="even"> <td>USA</td> <td>Canada</td> <td>Romania</td> <td>Europe 3</td> </tr> <tr> <td>Repechage 2</td> <td>Asia</td> <td>Repechage 1</td> Download at WoweBook.Com The CSS Anthology162 <td>Namibia</td> </tr> </table> We can add style rules for the classes we applied to our col elements; as shown here; the result is depicted in Figure 5.12: chapter05/columns.css (excerpt) body { font: 0.8em Arial, Helvetica, sans-serif; } .datatable { border: 1px solid #D6DDE6; border-collapse: collapse; width: 80%; } .datatable col.odd { background-color: #80C9FF; color: #000000; } .datatable col.even { background-color: #BFE4FF; color: #000000; } .datatable td { border:2px solid #ffffff; padding: 0.3em; } .datatable th { border:2px solid #ffffff; background-color: #00487D; color: #FFFFFF; font-weight: bold; text-align: left; padding: 0.3em; } Download at WoweBook.Com 163Tabular Data Figure 5.12. Creating alternately striped columns by styling the col element Discussion The col element provides us with further flexibility for styling a table’s columns to ensure that they’re visually distinct, thus making our table attractive and easier to understand. It’s also possible to nest col elements within a colgroup element, which allows us to control the appearance of columns by applying style rules to the parent colgroup element. If a colgroup element is absent, the browser assumes that your table contains one single colgroup that houses all of your col elements. Here’s an example of nested col elements: chapter05/colgroups.html (excerpt) <table class="datatable"> <colgroup class="odd"> <col /> <col /> </colgroup> <colgroup class="even"> <col /> <col /> </colgroup> … Here are the style rules that are applied to the colgroup element, rather than to col: Download at WoweBook.Com The CSS Anthology164 chapter05/colgroups.css (excerpt) .datatable colgroup.odd { background-color: #80C9FF; color: #000000; } .datatable colgroup.even { background-color: #BFE4FF; color: #000000; } The result of this change is a table with two columns of one color, and two of another, as shown in Figure 5.13. Figure 5.13. Styling columns using colgroup How do I display a calendar using CSS? Calendars, such as the example from a desktop application shown in Figure 5.14, also involve tabular data. The days of the week along the top of the calendar represent the headings of the columns. Therefore, a calendar’ s display constitutes the legitimate use of a table, but you can keep markup to a minimum by using CSS to control the look and feel. Download at WoweBook.Com 165Tabular Data Figure 5.14. A calendar from a desktop application Solution Our solution uses an accessible, simple table that leverages CSS styles to create the attractive calendar shown in Figure 5.15. Given its simple structure, it’s ideal for use in a database-driven application in which the table is created via server-side code: chapter05/cal.html (excerpt) <!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" lang="en-US"> <head> <title>Calendar</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="cal.css" /> </head> <body> <table class="clmonth" summary="Calendar for June 2009"> Download at WoweBook.Com The CSS Anthology166 <caption>June 2009</caption> <tr> <th scope="col">Monday</th> <th scope="col">Tuesday</th> <th scope="col">Wednesday</th> <th scope="col">Thursday</th> <th scope="col">Friday</th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> <tr> <td class="previous">31</td> <td class="active">1 <ul> <li>New pupils' open day</li> <li>Year 8 theater trip</li> </ul></td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td class="active">7 <ul> <li>Year 7 English exam</li> </ul></td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> <td class="active">17 <ul> <li>Sports Day</li> </ul></td> <td class="active">18 Download at WoweBook.Com [...]... scope="col">Sunday The table has a class of clmonth I’ve used a class rather than an ID because, in some situations, you might want to display more than one month on the page If you then found that you needed to give the table an ID—perhaps to allow you to show and hide the table using JavaScript—you could add an ID as well as the class Download at WoweBook.Com 170 The CSS Anthology The days are held... New pupils' open day Year 8 theater trip 2 3 4 5 6 The table, without CSS, displays as shown in Figure 5.16 Now that we have the structural markup in place, we can style the calendar I set a basic style for the body, including a base font size Then I set a style for the class clmonth for the borders to collapse, leaving no space... width for the table: chapter05/cal .css (excerpt) body { background-color: #FFFFFF; color: #000000; font-size: 90%; } clmonth { border-collapse: collapse; width: 780px; } Download at WoweBook.Com Tabular Data 171 Figure 5.16 Displaying the calendar without CSS I styled the caption within the class clmonth, then created styles for the table headers (th) and table cells (td): chapter05/cal .css (excerpt)... and the events for each day are marked up as a list within the appropriate table cell In the markup below, you can see that I’ve added classes to two of the table cells Class previous is applied to cells containing days that fall within the preceding month (we’ll use next later for days in the following month); class active is applied to cells that contain event information, so that we may highlight them:... vertical-align: top; } Download at WoweBook.Com 172 The CSS Anthology As you can see in Figure 5.17, our calendar is beginning to take shape Figure 5.17 Styling the caption, th, and td elements to make the calendar more user-friendly We can now style the lists of events within each table cell, removing the bullet and adding space between list items: chapter05/cal .css (excerpt) clmonth ul { list-style-type:... 0.6em; } clmonth li { margin-bottom: 1em; } Download at WoweBook.Com Tabular Data 169 Figure 5.15 The completed calendar styled with CSS Discussion This example starts out as a very simple table It has a caption, which is the month we’re working with, and I’ve marked up the days of the week as table headers using the tag: chapter05/cal.html (excerpt) . <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>14</td>. <td>5</td> <td>6</td> </tr> <tr> <td class="active">7</td> <td>8</td> <td>9</td> <td>10</td>. <td>10</td> <td>11</td> <td>12</td> <td>13</td> </tr> <tr> <td>14</td> <td>15</td> <td>16</td> <td