I am working on a website for a local tour operator at the moment. On this site there will be a list of available tours. Since it’s a simple list, with the name of the tour, a short description, the number of days the tour takes and the price, I decided to make list the tours in a table.

As you will see, this is a simple table, without too much code. This is a great example of how design is separated from the content.

The table
So I started with the basic HTML for the table.

<table class=”tour” cellspacing=”0″>
  <caption>Available Tours</caption>
  <tr>
    <th>Tour</th>
    <th>Duration</th>
    <th>Price</th>
  </tr>
  <tr>
    <td><a href=”tours1.html”>Brokopondo Tour</a> This is a short description of the Brokopondo tour. This tour brings you at a resort close to the biggest lake in Suriname.</td>
    <td>3 days</td>
    <td>$150 per person</td>
  </tr>
  <tr>
    <td><a href=”tours1.html”>Brokopondo Tour</a> This is a short description of the Brokopondo tour. This tour brings you at a resort close to the biggest lake in Suriname.</td>
    <td>3 days</td>
    <td>$150 per person</td>
  </tr>
  <tr>
    <td><a href=”tours1.html”>Brokopondo Tour</a> This is a short description of the Brokopondo tour. This tour brings you at a resort close to the biggest lake in Suriname.</td>
    <td>3 days</td>
    <td>$150 per person</td>
  </tr>
</table>

Since I want to leave room for using other tables to display data, I don’t want to make the styling of this table affect the other tables, so I assign the “tour” class to it.

By defining the cellspacing attribute for the table, we eliminate spaces between the cells. This could also be done with CSS using border-collapse: collapse;, but not all browsers know how to handle this CSS property.

As you see I used the tag in the first row instead of <td>. The th tag defines a cell that contains header information.

Also, I will use the caption tag to display the title of the table.

The styles
In my CSS document I added the following styles for this table:

table.tour {
  width: 100%;
  border: 1px solid #000;
  background: #fff;
}

table.tour th, table.tour td {
  margin: 0;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #b5b5b5;
}

I make sure the background of my table is set to white, because I have a very light image set as background of the site. I give all the cells a padding (space between the border of the cell and the actual content of the cell) of 8 pixels on the top and bottom of the content and 10px on the left and right. Then I put a line under the cells. This creates a nice dividing line between the rows, because I removed the space between the cells by setting cellpadding to 0.

Alternating the rows
Let’s give the rows alternating colors. This helps to make a clear distinction between the different tours. First I assign the “alternate” class to every other row. So in this case I change the second and the forth <tr> to <tr class=”alternate”>. My CSS code looks like this:

table.tour tr.alternate {
  background: #f1f1f1;
}

Now the rows with the “alternate” class will have a very light gray background, while the rows without class will be white.

Styling the tour name
To make it look better, I want to name of the tour to be displayed on it’s own line, with the description on the next line. However, I don’t want to use <br />, so when viewed in a browser that does not support CSS or with styles turned off, it will be on the same line to avoid confusion. In this case, I don’t touch my HTML at all. All I do is add another definition:

table.tour a {
  display: block;
  font-weight: bold;
}

This makes sure that the link (the a tag) is displayed as a block, using the full available width, even if it’s not that long, forcing the rest of the content to the next line. Bolding the link makes it stand out better.

The header row
The header row may need another color to make a clear distinction. I also need to make the black text there a little lighter, to make it stand out less, since the tours need the attention.

table.tour th {
  background: #ffcf0;
  color: #999;
}

Styling the caption
As you can see, the caption still looks out of place. This is how I take care of it:

table.tour caption {
  margin: 0;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  border: 1px solid #000000;
  border-bottom: none;
  background: #fff9f9;
}

Here I give the caption a padding of 10 pixels on all sides. Generally the caption is aligned to the center, but I need it to be left. You can choose wherever you want it positioned.
I give the caption a black border, but I remove the bottom border, because the caption is stuck to the table, so it can use the top border of the table as its bottom border. Not doing this will give a fat black dividing line between the caption and the header row.

So there you have it. You can see an example of the final work here.

One small addition: change the header cells from <th> to <th scope=”col”> to make it more screen-reader-friendly. Adding the “col” scope clarifies that the underlying column belongs to that specific header.

Conclusion
With a little HTML and some CSS you can style simple tables to look very nice. Make your tables look cool in CSS friendly browsers, while they are still readable with CSS-unfriendly browsers and software used by the not-so-abled.

I learned this way of styling my tables from Dan Cederholm’s book Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS. This is one book i personally recommend to anyone who is in web design or aspires to design websites.

I need to point out that Dan has published a second edition to this book, which will be available in August. But you can pre-order Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-case Scenarios With Xhtml and Css, Second Edition so it can be shipped to you as soon as it’s available.