CSS Mash

If you are like me and have been contemplating on using CSS instead of tables, or have been forever designing web layouts with tables and want to keep up with the ever changing demands of web design requirements, I have compiled a list of guides that have surely assisted me on my transition.

Before we dive into the list, let’s talk a little bit about why it makes good sense to use CSS instead of tables.

Having all the design aspect of your web pages located in one central place (the stylesheet), makes it so much easier to update the overall design. Any design changes made on the stylesheet can affect all pages on your site. No more tedious task on updating every page of your site.

Your web pages would definitely load faster. The stylesheet is only loaded once and then cached by the browser. For every other page your user visits, they are using the cached copy of the stylesheet. The HTML codes in your pages becomes smaller, making it load faster again.

It is easier to index by search engines. The HTML code is cleaner, light-weight and more content rich, boosting your code to content ratio.

So if you’re ready to take the plunge and start updating your table codes into CSS, check out the guides below:

1. Tableless layout HOWTO
Gives a basic introduction on HTML and explains why tables should not be used for layouts. The tutorial provides a quick run though on building a 3 column layout using a page in the W3C website as an example.

2. Designing Without Tables Using CSS
The guide takes you to a trip down memory lane, and points out issues brought today by the level of thinking when the web was created. It gives an extensive explanation on CSS and practical usage. The 4 chapters supplied are enough to get you on your way; else you can purchase the 12 chapter book which gives you a more in-dept understanding on CSS.

3. Tableless web design
http://en.wikipedia.org/wiki/Tableless_web_design
Gives great CSS information, history and its usage, touching on detailed explanation on benefits of CSS.

4. Dynamic Drive CSS Layouts
If you just want to skip the concept and jump straight into the fun part, Dynamic Drive CSS layouts provides ready made sample codes for you to try. Plenty of sample codes to just about cater most common web layouts found today.

5. Basic CSS Tableless
This is a great tutorial for beginners on getting right into the coding. The tutorial provides a simple step-by-step guide on building your first CSS layout using Dreamweaver.

I hope these guides have been helpful and informative to you as for me. As a final note, grasping the concept is hard at first, but when you get the hang of it, you’d be wishing you should have done it sooner. Enjoy.

Filed under: Guides by Marvin