[Last Call] Learn how to a build a cloud-first strategyRegister Now


tables to CSS

Posted on 2005-05-03
Medium Priority
Last Modified: 2013-11-19
Humeniuk answered my question very well. However, I though about it and I'd like to hear some more people, as this is a very interesting question.

The question is:

I currently use all tables. I would like to know everything it takes to be good with divs (CSS).

Question by:weikelbob
LVL 14

Accepted Solution

Esopo earned 600 total points
ID: 13923644

I didn't get to read Humeniuk's reply to that, but I'm sure he gave you something good.

My take is this:
To be good with CSS you should completely forget all that you know about tables. CSS works differently and has a very different approach to layout.

Tables work as fixed skeletons for your page. CSS is all about flow.
Tables have many limits, because they were not meant to be used as layout for everything. Yet they still have some advantages over CSS.
Instead CSS was built from the ground up to be all you need for web layout. It is much richer and powerful.


CSS 101:

For starters, one common mistake that beginners make is to thing that CSS is all about DIVs and SPANs. No, it doesn't work like that. DIVs and SPANs are phantom structures designed to take place when there is nothing else to take the style.

For instance, one outstanding use of CSS is to make a rollover menu. Check out the one I just did for a client:

0. No use of DIVs or SPANs (in the menu)
1. No javascript. Everything is done entirely using CSS which means there is no risk of unsupported scripting.
2. Small code, easy to read. Without the need for scripting everything "flows" like it should.

Most importantly:
3. Easy to maintain. It is actually a server side include, but what you see is just single lines of text. The menu links are done with text over images, which allows for quickly editing and adding - as opposed to the old fashioned way of creating every link as an image.
All the layout information is stored separatedly in the CSS file, so the menu and the layout info can be edited separatedly. If I don't like the colors or the sizes, I edit a line or two in the CSS file and it automatically changes the entire site.

The tricky part of CSS is learning to use it properly. It is so powerful that even the most experienced users are still discovering new ways to make it work.

This page sumarizes the importance of separating layout from content:

It has a main layout and then you can click to checkout other layouts where the only thing that changes is the CSS file.


I could go on and on about the importance of using CSS but the bottom line is, it will only work if you use it properly. For small sites, learning CSS the right way may not even be necessary.

But, CSS's main feature is its main drawback as well. Being so powerful and versatile, it is a major pain in the butt for rendering engines. I've seen IE bleed trying to render it properly, only to surrender and retreat. DW won't show it properly either.
Everytime I want to do something neat with it, I find myself coding in a text editor and going through extensive trial and error to get it to render decent in both IE and Firefox - but that's for the most advanced stuff.

I hope this helped you,

LVL 23

Assisted Solution

by:Saqib Khan
Saqib Khan earned 600 total points
ID: 13923848
Css is very important these days. I have to admit I mostly use Tables for Web Design but they work for me. but let me tell know in what case you need Css for sure..

Say you have SiteA.com with 1000 Pages. All of your pages are designed with the following Logic.
 Font Face = Tahoma
 Size = 10

now Someone from your managment tells you to Change font size to 12 or Font Face, do you think its OK to go through thousand Pages and Make changes Manually throughtout the Site?
answer is "NO"

in Css what you can do is, you have all the site properties into one single CSS file and then add the reference of that file to all pages, make one slight change to the CSS file and everything gets updated automatically.

Now DIVs and SPANs are interesting as well. now be carefull different browsers handle DIVs and SPANs differently. but they are way too fancy comparing with tables.

CSS is not really hard to learn, its not something like OOP or Advance T-SQL, you can learn it very fast.

Reference to Learn
 - W3SChools.com
 - Google

Good Luck

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question