A Common Approach

Just like with the other common components we've explored, you can create stylish tables by using spacer GIF shims and additional table cells that exist solely for the purposes of the design. These extra presentational bits have nothing to do with the data being presented, yet they are tangled deep within the table's code. The resulting table looks great in modern browsersbut from a flexibility and accessibility view it is quite a mess.

To illustrate this commingling of data and design, let's use the message boards found at the official site for a series of popular science fiction films. To protect its identity, we'll refer to the site as "Lance Spacerunner," named for its unlikely hero (Figure 7.1).

Figure 7.1. For our example, we'll use the message boards found at "Lance Spacerunner," a fictitious site that is based on a real-world example.

Each message board is really a table of data that presents the name and description of each discussion, the number of topics and messages, and the date and time of the last post. At the top sits the category name of the listingin this case, "The Films."

Let's zoom in and inspect the design details that make this table *insert hokey sci-fi adjective here*.

Figure 7.2 shows the details of the table design that we'll want to keep in mind when we rebuild the style. The table contains a title at the top, followed by column headings, followed by alternating row colors, with a single-pixel gray line separating each row. There is also a 4-pixel drop shadow on the entire table, offset by a few pixels at the top-right and bottom-left corners, giving the table a three-dimensional effect.

Figure 7.2. Let's examine the design details of a single table from the message boards section.

All in all, it's a nicely designed tableone that fits the intergalactic theme of the rest of the Lance Spacerunner site.