In 2005 I wrote an article about styling a table with CSS.
After receiving so many requests I finally decided to give in and write
another tutorial. Seems like a popular topic and an interesting one to
share some tricks on how you can nicely style them. This article is
about the proper usage of tables, for tabular data. How you can
implement them with accessibility in mind and how to make them
appealing for the eye using CSS.
The XHTML
If you've ever read my first article, you might remember that I suggested you to read Roger's article 'Bring on the tables'.
I can't explain it any more profound than how he does. However, I'll
give you a short overview of what to keep in mind when you are coding a
table with accessibility in mind. Here's my short list:
- Make sure to use the th elements for the headers in combination with the scope attribute
- Add a caption to your table, especially when there is more then 1 table on the same page
- Use the summary attribure in the table element to describe the content of the table
- Divide your table into sections by grouping table rows using the thead, tfoot and tbody element if needed
Why use table headers and scope?
It gives you 2 advantages. It makes the table more accessible for
people using a screen reader. Secondly, it makes it easier to style
with CSS. You can give all th elements another styling that sets it
appart from all other cells which are using the td element. Adding the
scope attribute will help people with screen readers to understand the
table better. We easily make the connection between the headers and the
data cells, but people using screen readers can't if there are 2 kind
of headers: one referring to a row and one referring to a column. We
use the scope attribute to explain how the headers work and how they
are connected with the data cells.
<table>
<tr>
<td></td>
<th scope="col">Webhosting Home</th>
<th scope="col">Webhosting Home Plus</th>
</tr>
<tr>
<th scope="row">Data usage</th>
<td>1 GB per month</td>
<td>2 GB per month</td>
</tr>
</table>
When to use the abbr attribute in headers
You can go an extra mile by using the abbr attribute as well. It's certainly recommended in case the headers are rather long.
<table>
<tr>
<td></td>
<th scope="col" abbr="Home">Webhosting Home for limited usage</th>
<th scope="col" abbr="Home Plus">Webhosting Home Plus for more extended usage</th>
</tr>
...
</table>
Why add a caption?
It provides a short description of the table. This information is
valuable for people using a screen reader. It's immediately clear what
the table is about.
<table>
<caption>Company X webhosting products overview</caption>
...
</table>
Why add summary?
Reading a table for people using a screen reader takes a lot of
patience and sometimes a caption doesn't give them enough information
but only a hint. Help them by giving a description upfront before they
delve into the data. It'll save them a lot of time. A summary can help
these people far more by the extra information they read.
<table summary="Webhosting
products overview showing all available packages, what's included and
what the monthly cost is with an option to order">
<caption>Company X webhosting products overview</caption>
...
</table>
The CSS
Time to talk about style and color. I have 2 examples to show:
Styling the table cells
In the CSS below I've highlited the styling for the borders. The
border-collapse property is set to collapse so the cells have no
cellspacing.
table {
width:90%;
border-top:1px solid #e5eff8;
border-right:1px solid #e5eff8;
margin:1em auto;
border-collapse:collapse;
}
td {
color:#678197;
border-bottom:1px solid #e5eff8;
border-left:1px solid #e5eff8;
padding:.3em 1em;
text-align:center;
}
Styling the headers
In the CSS code below you'll see that I've been using a class to style the alternating rows, but you can always use a simple javascript
in case you don't want to add these extra classes in the code and if
you want to keep your code extra extra clean. I've also added a class
for the 1st column since this one has yet another styling, also with an
alternating background effect.
CSS for example 1
tr.odd td {
background:#f7fbff
}
tr.odd .column1 {
background:#f4f9fe;
}
.column1 {
background:#f9fcfe;
}
CSS for example 2
tr.odd td,
tr.odd .column1 {
background:#f4f9fe url(images/background.gif) no-repeat;
}
.column1 {
background:#f9fcfe;
}
Styling the thead and tfoot elements
I'm using a different styling for the headers at the top of the table:
thead th {
background:#f4f9fe;
text-align:center;
font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
color:#66a3d3;
}
For the styling at the bottom of the table, I've added a strong element for the titles and em element for the prices:
tfoot th {
background:#f4f9fe;
text-align:center;
}
Here is the styling for the strong element which is for the 'actual' headers:
tfoot th strong {
font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
margin:.5em .5em .5em 0;
color:#66a3d3;
}
This is for the prices which are styled via the em element:
tfoot th em {
color:#f03b58;
font-weight: bold;
font-size: 1.1em;
font-style: normal;
}
Creation of the background image
This is done by creating a document of 25 by 600 pixels in
Photoshop. Create a new layer with a subtle vertical gradient. Select a
soft blue as the background color and a lighter blue for foregrond
color, this is the same color that will be used as background color in
the CSS. When the cell expands vertically it'll be filled with this
color. Select the gradient tool and drag a vertical line from bottom
upwards to the top while holding down the shift key.
Create another new layer, select the pencil tool and make sure it's
set to 1 pixel thickness. Draw a horizontal line starting at the top
left corner, holding down shift while dragging horizontally to the
right corner. Do the same for the vertical line: starting at the top
left corner, holding down shift while dragging vertically to the botton
left corner.
There you have it. Hope you enjoyed this tutorial and learned some valuable things :)