CSSPLAY

CSS DEMOS › Tables to CSS

Date : Pre 2006

For all modern browsers

Comparing a tables layout to a css equivlent. See the 'Information' section below.

Information

When I started out on this site I decided that I would not use tables for layout.
However, this was not always the case with my web sites. In fact in the early days I used tables almost all the time as they were so 'convenient'.

Well they were produced automatically using Macromedia Fireworks. I just cut up an image into slices and let Fireworks work out the html for the table. Perfect, or so I thought at the time.

Now, thanks to w3c.org, this is no longer acceptable. So we have to abandon the convenience of using tables and try to get css to perform the same function. But it is not half as bad as everyone tries to make out.

Just to show you what I mean, I have reproduced an intro page from one of my old 'graphic intensive' sites made with Fireworks, that relied on tables for layout (and javascript for the mouseover effect). This can be seen here Table Layout. You can examine the source code to see how complicated it really is.

...and a comparison page layout using just css here CSS Layout.

I will leave it up to you to decide which is neater, easier to follow, faster loading etc etc...

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.