|
Web Standards Solutions. The Markup and Style Handbook Authors: Cederholm D. Published year: 2003 Pages: 20-23/119 |
 |
| < Day Day Up > |
Wrapping Up
I hope that by comparing a few common methods of markup, it's easy to see the value in using proper heading tags. Visual and nonvisual browsers and devices will understand and display them accordingly , search engines will index them properly, and styles can be easily applied and maintained using CSS.
| < Day Day Up > |
| < Day Day Up > |
Chapter 3: Tables are Evil?
Overview
Say what? When did using tables become an act of pure evil? Certainly one of the biggest myths of building a site with web standards is that you should never use a table. Ever. That you should avoid them like the plague, seal them up, and place them on a dusty shelf like an artifact of the web development days of old.
Where did the distaste come from? It probably began innocently enough, with at least good intentions from the start. Many have been rightfully preaching the benefits of tossing out conventional nested table and spacer GIF layouts and replacing them with lean, structured markup and CSS for presentation. We may have tossed out the peeler with the peelings though, with some touting the banishment of tables in general—for any situation.
We'll tackle CSS layouts and all the benefits they produce later on in the book, but let's focus right now on using tables for situations where they are appropriate—namely for marking up tabular data. We'll figure out a few simple things we can do to make our data tables more accessible and stylish.
| < Day Day Up > |
| < Day Day Up > |
Totally Tabular
There is absolutely no reason not to use a table for marking up tabular data. But wait, what is tabular data? Here are just a few examples:
-
Calendars
-
Spreadsheets
-
Charts
-
Schedules
For these examples and many others, it would take some severe CSS acrobatics to mark the data up to appear visually like a table. You could imagine trying to float and position all of the items with crafty CSS rules, only to end up with frustratingly inconsistent results. Not to mention that accurately reading the data without CSS would be nightmarish. The fact is, we shouldn't be afraid of tables—and we should use them for what they were designed for.
| < Day Day Up > |
| < Day Day Up > |
A Table that Everyone Can Sit At
One of the reasons that tables get a bad rap is due to the accessibility problems they can cause if not carefully used. For instance, screen readers can have difficulty reading them properly, and small-screened devices are often hindered by tables when they are used for layout. But there are a few simple things we can do to increase the accessibility of a data table, while at the same time creating a lean structure that will be easy to style later on with CSS.
Let's take a look at the simple table example found in Figure 3-1, illustrating one of American baseball's longest droughts.
Figure 3-1:
Example of a typical data table
Although an extremely depressing set of statistics for a Red Sox fan to look at, Figure 3-1 is a perfect example of tabular data. There are three table headers (Year, Opponent, and Season Record (W-L)) followed by the data for each of the four years presented. Above the table is a caption , defining what is contained below.
Marking up this data table is relatively straightforward, and we might do something like the following:
<p align="center">Boston Red Sox World Series Championships</p> <table> <tr> <td align="center"><b>Year</b></td> <td align="center"><b>Opponent</b></td> <td align="center"><b>Season Record (W-L)</b></td> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr> <tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </table>
That should render close to what we see in Figure 3-1; however, there are a few improvements we can make here.
First off, we can treat the title of the table, "Boston Red Sox World Series Championships," a little more semantically correct by using the <caption> tag. The <caption> is required to immediately follow the opening <table> tag and usually holds the title and/or nature of what's contained within the table.
Visually, it will be easy for sighted people to understand what the table's purpose is, while assisting those browsing by nonvisual means as well.
Let's replace the opening paragraph and add in a proper <caption> :
<table> <caption>Boston Red Sox World Series Championships</caption> <tr> <td align="center"><b>Year</b></td> <td align="center"><b>Opponent</b></td> <td align="center"><b>Season Record (W-L)</b></td> </tr> <tr> <td>1918</td> <td>Chicago Cubs</td> <td>75-51</td> </tr> <tr> <td>1916</td> <td>Brooklyn Robins</td> <td>91-63</td> </tr> <tr> <td>1915</td> <td>Philadelphia Phillies</td> <td>101-50</td> </tr> <tr> <td>1912</td> <td>New York Giants</td> <td>105-47</td> </tr> </table>
It's important for captions to quickly convey what the data is that follows . By default, most visual browsers will place text that's contained within <caption> tags centered and just above the very top of the table. We could, of course, alter the default styling of the caption after the fact using CSS if we wished—and we'll do just that later in the "Extra credit" section of this chapter. The fact that it's now in its own unique tag makes this nice and easy.
| < Day Day Up > |
|
Web Standards Solutions. The Markup and Style Handbook Authors: Cederholm D. Published year: 2003 Pages: 20-23/119 |
|
