introduction | selectors | properties | advanced | real world CSS tables | compatibility | web design | validating

tables with CSS

In this chapter you're going to see how to make attractive, readable tables using HTML 4.0 and CSS alone. We chose this issue for two reasons. Firstly, it is a project that can cause frustrations especially if you are new to style sheets. Secondly, it demonstrates well some key issues involved in developing flexible, accessible we pages, and so is of benefit to any developer, regardless of whether you have a pressing need to build a table in HTML 4.0 and give it appearance with CSS.

The screenshots I've shown were taken from Internet Explorer 6.0 for Windows, but this table works equally well in all contemporary browsers. You don't need to be absolutely obsessed with making your table look exactly the same in every single browser. Just make sure its content is legible. If you stick to the standards you'll ensure forward compatibility and maximum adaptablity and flexibility for your work.

Note that this chapter is about using tables for tabular information - text and images - not using tables for the sort of layout you should all be doing these days with positioned elements.

Standards-based HTML 4.0

So, what type of table can you make with just plain-old standards-based HTML 4.0 and CSS? With just a little bit of trickiness, you can make a table that looks just like this.

figure 5: the finished table. HTML 4.0 plus CSS only

Start by getting the basics right with your HTML. I'm not going to discuss this in detail, as it really is beyond the scope of this guide. However the code for this table is just below, and if you want to go there in depth it is covered in our course HTML and XHTML for CSS. Most importantly you mustn't put any presentational markup in your HTML, so if you have been in the habit of using attributes like border, cellpadding, cellspacing and width on your HTML tables, then forget about them now. Sometimes using a WYSIWYG editor can take the tedium out of creating tables, but just be sure it doesn't slip these attributes in on you. From now on, you'll only be using these elements

• <table>
• <tr>
• <td>

and these attributes

• rowspan
• colspan
• class

Here's the HTML for the table.

Let's face it though, without some style this table is not only kind of boring, it's also a little hard to read.

figure 6: HTML 4.0 table with no style sheet

Borders

The first thing you might like to do with your table involves the use of borders. These not only make the table look more attractive, they can also be an aid to legibility. Simple though you think borders should be though, their implementation with tables, in combination with varied support in the different browsers can make for a lot of head-scratching. But afterall, that's why we've written this special chapter.

We want our table to look like this.

figure 7: table with borders

And here's the code we've used to do it.

First we used the border shorthand to put a border on the table cells or <td>s.

In theory all we should have to do then is set the border-collapse property on the table to collapse - this makes adjacent borders collapse on to each other. So if you have cells with 2px borders beside each other you won't see a 4px line between the cells, but a 2px line. That's all you need do to make your table borders work in Internet Explorer 6.0 Windows.

Unfortunately, though, Netscape 6.0 does not have support for border-collapse. That's why you also see the properties border-spacing and border for the table selector. This is a compromise. border-spacing allows you to set a value for the distance between the borders of the cells in the table. Set this to zero and at least the adjacent cells will sit snugly against one another, with no gap in between. Note that border-spacing is in fact not supported by Internet Explorer 6.0 Windows, so this property has no effect here.

We've also put a border on the table itself because otherwise in Netscape 6.0 the border around the table is only half the width of that between cells. Because we've used border-collapse: collapse this too has no effect in Internet Explorer 6.0. So the result is we've now got a table with equally wide lines around its edges and between its cells in both Netscape and Internet Explorer - they're just wider in Netscape.

If you want a wider border around the table than between the cells, or even one with a different color that's easy. You just do this using the border property for the table selector. Don't put padding on the table element - this doesn't actually work.

Color

Use of color is another way of making your table look better and also more legible. For a simple effect, you can give a background-color to the table selector, and this color will be inherited by all the cells in the table. However, if you've given "class" attributes to some of the cells in your table (as you'll see we have in fact done in the HTML above), you can then use class selectors to give different colors to particular cells. While you're at it you might also want to change the font-size, font-weight and text-align for these cells.

figure 8: table with colors

Here's the relevant parts of our style sheet now.

If you want to do something really cool you can even use background-image on your table - mind those usability issues though!

Evening things up

Another aid to legibility is the use of whitespace. What we're going to do now is even up the width of the columns in the table, by giving them all a width of 25%. As we've got 4 columns in our table, a width of 25% on <td>s means they will all be the same width. If we had only 3 columns in our table, a width of 33% would be just fine. We're also going to put a bit of padding on the different cells , to create a bit of space between the content and the border. Here's how it looks once we're done.

figure 9: the finished table. HTML 4.0 plus CSS only.

And here's the relevant parts of the style sheet.

Notice how we've used percentages and ems for our padding. This ensures that the actual amount of padding that appears on the page will be relative to the size of the table (percentages) or the size of the font (ems). This way your table is much more accessible than if you had used a fixed length such as pixels to set te padding. Notice in the pictures below how everything grows and shrinks proportionally as the entire table grows and shrinks.

figure 10: narrow table

The padding on the <td>s will always be 1% of the actual width of the <table>, ie the parent element. So here, where the table is in a very narrow window the padding is quite small. This means then that when someone views the page on a small screen they don't have a lot of their screen real estate wasted with the luxury of padding.

figure 11: wide table

Notice how much more padding there is now when the table is quite wide. The padding on the cells will always remain proportional to the width of the entire table.

figure 12: table with text size increased

Here I've used text zoom to increase the font size. Because I've set the top and bottom padding on the title bar (where it says "cloves") using ems the actual amount of padding will increase when I zoom the text. It will always be .15 of the actual height of the text.

So you can se how it's pretty easy to start making adaptable web pages today - just stay away from those pixels and start using percentages and ems.

You can use the also use the width property to ensure a table has a certain width no matter what its content is. For example you might want it to be always 80% of the width of the page. To make the table centered on the page give it a left and right margin evenly dividing the space that's left.

You can do some pretty powerful design with tables that works well in browsers right now. Just remember though, only use tables for tabular information, not for elaborate layouts of images.

next: compatibility

introduction | selectors | properties | advanced | real world CSS tables | compatibility | web design | validating