Dan Fergus Design > Student Resources > Syllabus > Styling Tables

Des•301 Advanced Web Design

Styling Tables

Thanks to CSS, tables are not being used for Web page structure as much as they used to. Tables have gone back to doing what they were designed to do—present tabular data. Still, poorly designed tables can be obstacles to accessibility and usability. In this exercise, we will look at ways we can make tables that are not only more accessible, but also more legible and attractive to all users.

Markup

Here's a basic table:

<table>

<tr>
<th>Playlist Position</th>
<th>Track Name</th>
<th>Artist</th>
<th>Album</th>

</tr>

<tr>
<td>1</td>
<td>Nearer Than Heaven</td>
<td>Delays</td>
<td>Faded Seaside Glamour</td>

</tr>

<tr>
<td>2</td>
<td>Phantom Limb</td>
<td>The Shins</td>
<td>Wincing the Night Away</td>

</tr>

<tr>
<td>3</td>
<td>The Last Beat of My Heart</td>
<td>DeVotchKa</td>
<td>Curse Your Little Heart</td>

</tr>

<tr>
<td>4</td>
<td>Drive On, Driver</td>
<td>The Magnetic Fields</td>
<td>Distortion</td>

</tr>

<tr>
<td>5</td>
<td>Young Adult Friction</td>
<td>The Pains of Being Pure at Heart</td>
<td>The Pains of Being Pure at Heart</td>

</tr>

<tr>
<td>6</td>
<td>Take Me To the Riot</td>
<td>Stars</td>
<td>In Our Bedroom After the War </td>

</tr>

</table>

It creates something that looks like this:

	Track Name	Artist	Album
1	Nearer Than Heaven	Delays	Faded Seaside Glamour
2	Phantom Limb	The Shins	Wincing the Night Away
3	The Last Beat of My Heart	DeVotchKa	Curse Your Little Heart
4	Drive On, Driver	The Magnetic Fields	Distortion
5	Young Adult Friction	The Pains of Being Pure at Heart	The Pains of Being Pure at Heart
6	Take Me To the Riot	Stars	In Our Bedroom After the War

It's your basic, no-frills table. But it's not very attractive, nor is it easy to read. And a screenreader would have all sorts of problems with it. So let's fix it. First we need to add some tags and attributes to make it more accessible and to provide some "hooks" for CSS. Here is the same table with a few key additions (in red):

<caption> Top 6 Playlist</caption>

</colgroup>

<thead>

<tr>
<th id="playListPosHead">Playlist Position</th>
<th>Track Name</th>
<th>Artist</th>
<th>Album</th>

</tr>

</thead>

<tbody>

<tr class="odd">
<td>1</td>
<td>Nearer Than Heaven</td>
<td>Delays</td>
<td>Faded Seaside Glamour</td>

</tr>

<tr>
<td>2</td>
<td>Phantom Limb</td>
<td>The Shins</td>
<td>Wincing the Night Away</td>

</tr>

<tr class="odd">
<td>3</td>
<td>The Last Beat of My Heart</td>
<td>DeVotchKa</td>
<td>Curse Your Little Heart</td>

</tr>

<tr>
<td>4</td>
<td>Drive On, Driver</td>
<td>The Magnetic Fields</td>
<td>Distortion</td>

</tr>

<tr class="odd">
<td>5</td>
<td>Young Adult Friction</td>
<td>The Pains of Being Pure at Heart</td>
<td>The Pains of Being Pure at Heart</td>

</tr>

<tr>
<td>6</td>
<td>Take Me To the Riot</td>
<td>Stars</td>
<td>In Our Bedroom After the War </td>

</tr>

</tbody>

</table>

Let's look at these additions in greater detail. First, we added id attributes to several tags which will allow us to apply styles more directly. Then we added a summary attribute, which works like an alt attribute in image tags. This is primarily for screenreaders; the user can opt to view a summary of the table data, rather than have the reader read the entire contents of the table. We also used one of the old attributes cellspacing, to get rid of the default gaps between the cells. Why not do this with CSS? Well, that would be preferable, but of course IE 6 and below doesn't recognize the border-spacing property, so we have to use cellspacing.

Next we added a <caption> tag. While not strictly necessary, it's a nice thing to have. The <colgroup> section allows us to group and name vertical columns. Not every browser will recognize colgroups however, but it certainly doesn't hurt having them.

We next surrounded the different sections of the table with <thead> and <tbody> tags. If this table had a footer, we could have used a <tfoot> tag as well. One interesting note—a table can have multiple <tbody> sections (unlike an html document that has only one <body>).

Finally, we added a class called "odd" to the odd numbered rows; we're going to create a style that will affect only those rows shortly.

These changes to the markup will have almost no visible effect on the table (save the addition of the caption at the top). Now let's make it pretty (and more legible) with some styles.

CSS

We'll start by specifying a font and line-height. Note I'm using the shorthand "font" style property that combines size, line-height and font-family into one line. The slash is used to separate font size & line-height; this is the only place a slash is ever used to separate keywords in a property.

There's a useful, if lesser known style property called border-collapse. If border-collapse is set to separate, borders are drawn around all cells (the default). If however the property is set to collapse, the borders between cells are shared; we're going to go with collapsed borders. Let's add a border and set a width to keep the table from getting too wide:

table {
font-size: .8em;
font-family:"Myriad Pro", "Lucida Grande", "Lucida Sans", Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #777;
width: 50em;
}

Now lets add some padding and margins to the cells and caption, and punch up the caption a bit with boldface and a larger font size:

td, th {
padding: .1em 1em;
}

caption {
font-size: 1.2 em;
font-weight: bold;
margin: 1em 0;
}

Now lets do something a little trickier; we'll add borders between the vertical columns be hanging them on the <col> tags. Then we'll remove the last one so we don't have an extra line:

col {border-right: 1px solid #ccc;
}

col#albumCol {
border:none;
}

Beware that some browsers (IE?) don't recognize the <col> tags; if you want to ensure that everyone can see these column borders, you'll have to apply them to each cell and then remove them from each of the cells on the right using class styles. Not worth it as far as I'm concerned.

Let's work on the header portion next. I'm going to use a simple graphic as a background image; you can download a copy of it here. Then we'll add a few other tweaks:

thead {
background:#ccc url(images/bar.gif) repeat-x left center;
border-top: 1px solid #a5a5a5;
border-bottom: 1px solid #a5a5a5;
}

th {
text-align:left;
}

#playListPosHead {
text-indent:-999em;
}

The last style rule there hides the "Playlist Position" text which we don't really need, but included for screenreaders.

Beginning to look pretty cool, eh? Okay lets add background colors to the alternating lines to improve visibility. We added class attributes to all of th odd lines which allow us to write a style like this:

.odd {
background-color: #edf5ff;
}

FYI: Coming soon in CSS3...

Using the above method works, but requires all of those extra class="odd" attributes. However, there's a cool addition to CSS3 that will make the extra markup unnecessary:

tr:nth-child(odd) {
background-color: #edf5ff;
}

This will automatically find all of the odd-numbered rows and add the new style. Alas, so far only Safari has implemented it. If you have Safari and you want to see it work, try a different color and switch odd to even:

tr:nth-child(even) {
background-color: #ff0;
}

You can try these out, but then get rid of 'em.

Finally, let's add a rollover which will allow folks to mouse over the table and get some visual feedback:

tr:hover {
background-color: #3d80df;
color:#fff;
}

thead tr:hover {
background-color:transparent;
color:inherit;
}

The final rule turns the rollover effect off in the header. Bear in mind that these last two rules use pseudo-styles not recognized by IE. However, this is a visual extra that we've added, a bonus for those who are smart enough to use a good browser, if you will.

So here is the final result:

Top 6 Playlist
Playlist Position	Track Name	Artist	Album
1	Nearer Than Heaven	Delays	Faded Seaside Glamour
2	Phantom Limb	The Shins	Wincing the Night Away
3	The Last Beat of My Heart	DeVotchKa	Curse Your Little Heart
4	Drive On, Driver	The Magnetic Fields	Distortion
5	Young Adult Friction	The Pains of Being Pure at Heart	The Pains of Being Pure at Heart
6	Take Me To the Riot	Stars	In Our Bedroom After the War

Course Outline

Syllabus

Student Resources