CSS Table with One Pixel Borders

First up is the collapsed border table that has the solid line borders making this the basis for most popular table styles.

The code includes the CSS which you can add to your stylesheet and please note a class has been added to the table tag.

Example -

CSS Table with Background Images

This image approach is a little old school but it may still come in handy once in a while. If you're looking for a more modern approach, then check out the CSS Table Gradient example below.

This table is similar to the one above except it uses background images which allows the table cells to have a subtle color gradation in them. The images also have a one pixel white line on the left and top which gives the cells a slight 3D effect.

You'll probably have to make two small changes to the CSS to reflect where the table images live on your server other than that it's fairly straightforward.

Example -

HTML Table using CSS Gradients

This one is a more modern version of the image one - it uses CSS gradients to achieve the bevelled look of the image table example. It's a completely image free table rendering.

This code will display correctly across all modern browsers even Internet Explorer 9. It's not pixel perfect in Internet Explorer 7 or 8 but it's a good enough rendering and doesn't impare legibility.

Example -

CSS Table with Automatically Alternating Rows (Requires Javascript)

This CSS table uses Javascript to automatically alternate row colors. This is especially great if you have a large table that gets updated frequently.You can now also achieve this effect in CSS for all the modern browsers. Learn more about using CSS to make a table with alternating rows.

Example -

CSS Table with Highlight Row on Hover (Requires Javascript)

Nowadays I just use CSS for this so you should probably go read about how to highlight a table row using CSS.

Otherwise the code below highlights a table row using Javascript which I wouldn't advise you to normally use unless you either must provide support for IE6 (in which case you have my sympathy) or you have to work on a web page without a doctype. HTML pages created without doctypes will prevent a pure CSS solution for table row highlighting from working on all versions of Internet Explorer.

But seriously, go check out the CSS hover solution first - it's a much better method.

One thing to note is you should make sure not to define the background color of a table cell in your stylesheet as that'll stop the row highlight code from working properly.

Example -

The look of an HTML table can be greatly improved with CSS : -

Example -