tables to CSS

Posted on 2005-05-03
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


    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

    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 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
     - Google

    Good Luck

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Suggested Solutions

    This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
    What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
    Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now