Sealyu

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.

1. <table>
2. <tr>
3. <td></td>
4. <th scope="col">Webhosting Home</th>
5. <th scope="col">Webhosting Home Plus</th>
6. </tr>
7. <tr>
8. <th scope="row">Data usage</th>
9. <td>1 GB per month</td>
10. <td>2 GB per month</td>
11. </tr>
12. </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.

1. <table>
2. <tr>
3. <td></td>
4. <th scope="col" abbr="Home">Webhosting Home for limited usage</th>
5. <th scope="col" abbr="Home Plus">Webhosting Home Plus for more extended usage</th>
6. </tr>
7. ...
8. </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.

1. <table>
2. <caption>Company X webhosting products overview</caption>
3. ...
4. </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.

1. <table summary="Webhosting products overview showing all available packages, what's included and what the monthly cost is with an option to order">
2. <caption>Company X webhosting products overview</caption>
3. ...
4. </table>

The CSS

Time to talk about style and color. I have 2 examples to show:

• Example 1 uses no background images but only background color for the table cells
• Example 2 uses a background image

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.

1. table {
2. width:90%;
3. border-top:1px solid #e5eff8;
4. border-right:1px solid #e5eff8;
5. margin:1em auto;
6. border-collapse:collapse;
7. }
8. td {
9. color:#678197;
10. border-bottom:1px solid #e5eff8;
11. border-left:1px solid #e5eff8;
12. padding:.3em 1em;
13. text-align:center;
14. }

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

1. tr.odd td {
2. background:#f7fbff
3. }
4. tr.odd .column1 {
5. background:#f4f9fe;
6. }
7. .column1 {
8. background:#f9fcfe;
9. }

CSS for example 2

1. tr.odd td,
2. tr.odd .column1 {
3. background:#f4f9fe url(images/background.gif) no-repeat;
4. }
5. .column1 {
6. background:#f9fcfe;
7. }

Styling the thead and tfoot elements

I'm using a different styling for the headers at the top of the table:

1. thead th {
2. background:#f4f9fe;
3. text-align:center;
4. font:bold 1.2em/2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
5. color:#66a3d3;
6. }

For the styling at the bottom of the table, I've added a strong element for the titles and em element for the prices:

1. tfoot th {
2. background:#f4f9fe;
3. text-align:center;
4. }

Here is the styling for the strong element which is for the 'actual' headers:

1. tfoot th strong {
2. font:bold 1.2em "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
3. margin:.5em .5em .5em 0;
4. color:#66a3d3;
5. }

This is for the prices which are styled via the em element:

1. tfoot th em {
2. color:#f03b58;
3. font-weight: bold;
4. font-size: 1.1em;
5. font-style: normal;
6. }

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 :)