By R. Christie
Tables have got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, the amount of detail we have to take care of, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!
First things first
We start with a valid xhtml 1.0 strict markup. Here is an example of a valid table markup:
<!-- Table markup--> <table id="..."> <!-- Table header --> <thead> <tr> <th scope="col" id="...">...</th> ... </tr> </thead> <!-- Table footer --> <tfoot> <tr> <td>...</td> </tr> </tfoot> <!-- Table body --> <tbody> <tr> <td>...</td> ... </tr> ... </tbody> </table>
You can read more about xhtml table markup in HTML Dog’s Table Section1. I have tested the tables below in Mozilla Firefox 3, IE 6 and 7, Opera 9.x and Safari. Also note that I apply a light blue color scheme to all of these tables to give the article a consistent look. You can modify the color scheme to match your site — the source package2 is provided in the end of the article.
Before we start, let’s review the general rule of thumb for styling of tables:
Tables love space. Set the width of tables carefully, according to the content. If you don’t know the perfect width, simply set the
100%. Tables look nicer when they have “overwidth”, and when it comes to tables too much width is definitely better than too little width.
Cells need some padding. Sure, each table cell relates to each other. But it doesn’t mean that we have to pull them too close, right? Define some space between the cells, crammed up table cells are so much harder to read.
Treat tables the way you treat content. Tables are read similarly to the way we read text — except it’s harder and it takes more time to read a table. So be careful with the amount of contrast you are giving to your table. Use soft colors — it’s easier for the eyes. Don’t treat your table like it’s a graphical decoration. Make sure that the style you apply to it makes the content more readable, not the other way around.
Now that we are all set up let’s get going, shall we?
- 1 http://www.htmldog.com/guides/htmlbeginner/tables/
- 2 http://www.smashingmagazine.com/images/express-css-table-design/express-css-table-design.zip