The CSS Anthology: 101 Essential Tips, Tricks & Hacks- P10 pdf

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 hi

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)

Job done!

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 hilitein this example:

chapter05/hiliterow.css (excerpt)

Then, add the following JavaScript code to your page after the table:

chapter05/hiliterow.html (excerpt)

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

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)

We then remove the class when the mouseout event is fired:

chapter05/hiliterow.html (excerpt)

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 when the event for that element is triggered

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

chapter05/columns.html (excerpt)

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)

Figure 5.12 Creating alternately striped columns by styling the col element

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 colgroupelement If a colgroupelement 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)

Here are the style rules that are applied to the colgroupelement, rather than to col:

chapter05/colgroups.css (excerpt)

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

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)

chapter05/cal.css

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 <th> tag:

chapter05/cal.html (excerpt)

The days are held within individual table cells, 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 nextlater for days in the following month); class activeis applied

to cells that contain event information, so that we may highlight them:

chapter05/cal.html (excerpt)

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 between cells and set a width for the table:

chapter05/cal.css (excerpt)

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)

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)

chapter05/cal.css (excerpt)

This is just one of many ways to create a calendar Online calendars are commonly used on blogs, where they have clickable days where visitors can view entries made that month By removing the events from our HTML markup, representing the day names with single letters—M for Monday, and so on—and making a few simple changes to our CSS, we can create a simple mini-calendar that’s suitable for this purpose, like the one shown in Figure 5.18

Figure 5.18 Creating a mini-calendar

Here’s the HTML and CSS you’ll need for this version of the calendar:

chapter05/cal_mini.html (excerpt)

chapter05/cal_mini.css

Summary

In this chapter, we’ve discovered that tables are alive and well—when used for their original purpose of displaying tabular data, that is! CSS gives you the ability to turn data tables into really attractive interface items, without negatively impacting their accessibility So, please, embrace tables and use them to display tabular data—that’s their job!