Tables vs CSS

Discussion in 'CSS' started by anton-io!, Mar 30, 2005.

  1. #1
    Looking for some feedback about designing sites stricly in CSS vs Tables w/ Css attached.

    I'm from the school that creates sites using tables for layout, with CSS attatched to the HTML file. I find it has been good to me for laying out the nav bars, top banners, content, etc....

    Also, I'm working w/ DreamWe*ver and visually one can see the layout immediately with CSS formatting.

    I'm working on a new project where it is being debated on building the site strictly in

    1 - CSS for layout and everything else (here we have absolute and relative positioning - ugh!)
    2 - or Tables for layout and a CSS file for style

    The proposed main index page code ends up looking something like this with the CSS layout (1) choice...

    
    </head>
    <body>
    <?php include('ae_banner_top/index_aml.php');?>
    <?php //include('ae_nav_top/index.php'); ?>
    <?php include('ae_nav_left/index.php'); ?>
    <?php include('ae_content/index.php'); ?>
    <?php include('ae_nav_right/index.php'); ?>
    <?php include('ae_nav_bottom/index.php'); ?>
    <?php include('ae_banner_bottom/index.php'); ?>
    </body>
    </html>
    
    Code (markup):
    I'm not a CSS guru, but I have managed fine so far with tables & css ... your thoughts please!

    thx
     
    anton-io!, Mar 30, 2005 IP
  2. alias420

    alias420 Guest

    Messages:
    139
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'm from the old school tables group my self but have been forcing myself to learn and use css for layout. It looks to be the future of web design/development. It is also nice to be able to put the content where ever you want on the page and format it to appear somewhere else. Works nicely with SEO
     
    alias420, Mar 30, 2005 IP
  3. dct

    dct Finder of cool gadgets

    Messages:
    3,132
    Likes Received:
    328
    Best Answers:
    0
    Trophy Points:
    230
    #3
    I too was old school with using tables for all layout. I have certainly found it worth the time investment learning CSS and doing the switch, makes you code that much more manageable, smaller and cleaner.
     
    dct, Mar 30, 2005 IP
  4. sponk

    sponk Peon

    Messages:
    85
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I would recommend switching to CSS for the general site layout... however, stick to tables for tabular data display :)
     
    sponk, Mar 30, 2005 IP
  5. LGRComp

    LGRComp Well-Known Member

    Messages:
    516
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    195
    #5
    When I made the switch to using css instead of tables I had to think start thinking a little different. Overall though it is diffenantly worth getting rid of the tables except for tabular data. The pages become easier to update and maintain, not to mention there is often a speed increase, since some of the bloat from the code is gone.
     
    LGRComp, Mar 30, 2005 IP
  6. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #6
    1) tables are a big part of the CSS spec;
    2) tables have well-defined structure and in most cases will render faster than a pile of div's and line boxes;

    Simply put, there's no such thing as "tables vs. CSS".

    J.D.
     
    J.D., Mar 30, 2005 IP
  7. ResaleBroker

    ResaleBroker Active Member

    Messages:
    1,665
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    90
    #7
    J.D., do you see a push for tableless pages? What are your thoughts on tableless pages?
     
    ResaleBroker, Mar 30, 2005 IP
  8. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I want to underline one thing with regards to this question - CSS and tables are not two different mechanisms to lay out pages. These two standards work hand-in-hand to to allow us to create easy to maintain, reusable patterns. The separation between them is simple - HTML defines document structure (what's inside of what) and CSS defines style (what color it is and where on the page it sits).

    Initially, there was no CSS and it was natural for people to come up with some way to style tables - we all know things like bgcolor, align, etc. Later smart folks realized that it's nightmare to maintain all these width's and align's sprinkled all over HTML and CSS was put together. Howver, the initial HTML legacy somehow still lives on and, amazingly, still has loyal followers.

    Back to the question. My approach is simple - whatever takes less of your time to maintain and looks the way you want it to be. Personally, I use both, tables and divs in combination (both styled with CSS - I use nothing that is marked as depreciated in the HTML spec).

    Speaking of performance, div's may look simple, but when you realize that the browser has to process everything around these div's (all inline content before and after, all blocks, shift inline content inside blocks, etc), it really isn't.

    So, if a bunch of floats works fine for a left/right-aliged menu, then that's just what you need. If, however, you end up creating a table-like structure with div's including div's including div's - why not use a table instead?

    J.D.
     
    J.D., Mar 30, 2005 IP
  9. ResaleBroker

    ResaleBroker Active Member

    Messages:
    1,665
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    90
    #9
    I see your point. I wonder why some are pushing tableless pages?
     
    ResaleBroker, Mar 30, 2005 IP
  10. J.D.

    J.D. Peon

    Messages:
    1,198
    Likes Received:
    65
    Best Answers:
    0
    Trophy Points:
    0
    #10
    For some people it's maintainability (imagine if you don't use some form of server-side includes - finding those closing </td>'s may be a bit of a challange on a multi-K page). For some it's aesthetic - self-contained div's do look nicer than td's and tr's sprinkled all over the page. For some, it's simply an urban legend :)

    J.D.
     
    J.D., Mar 30, 2005 IP
  11. anton-io!

    anton-io! Active Member

    Messages:
    540
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    58
    #11
    exactly ...

    I'm finding walking in to a project already built with tables where the debate is to turn all the tables and inner tables to CSS. vBulletin is integrated in to the project (where I'm seeing tables), so why not stay with the existing format.

    My concern is the time to figuring out someone else's new div. Thx
     
    anton-io!, Mar 30, 2005 IP
  12. alias420

    alias420 Guest

    Messages:
    139
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #12
    I think nested div's are still better then tables you just dont get the same alignment and stretching problems that you do with tables. You get different problems but not those ones ;)
     
    alias420, Mar 30, 2005 IP
  13. davedx

    davedx Peon

    Messages:
    429
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I basically follow the standard. XHTML 1.0 is fine with tables, and as JD says there's no mutual exclusivity. My personal view is use tables for "master layout" and divs for any fiddly details. I think that way is good because you're a bit more backwards compatible with older browsers too (i.e. they won't be completely screwed if the overall layout uses tables).

    So yeah, to summarise, use your judgement and try to follow the standards. If it validates XHTML and isn't hideously bloated then "it's not broken - don't fix it".
     
    davedx, Mar 31, 2005 IP
  14. ResaleBroker

    ResaleBroker Active Member

    Messages:
    1,665
    Likes Received:
    50
    Best Answers:
    0
    Trophy Points:
    90
    #14
    Thanks for all of the great feedback J.D. :)
     
    ResaleBroker, Mar 31, 2005 IP
  15. Webnauts

    Webnauts Peon

    Messages:
    133
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
  16. GTech

    GTech Rob Jones for President!

    Messages:
    15,836
    Likes Received:
    571
    Best Answers:
    0
    Trophy Points:
    0
    #16
    I use both, though the past year primarily css. I find (even after a year) CSS layout to be frustrating at best. I've developed enough css only (tabless, if you will) sites, that I have a nice collection to pull from. I forced myself to do it, as it was all the rage. The source is very easy to maintain, but sometimes you run into one little tweak that no matter what you do, you spend hours trying to find just the right setting.

    For my small business web site customers, I mostly do CSS now. For larger sites that require scripts, they still use tables and I wouldn't even think of trying to recode them into css (ie OSCommerce, web directories, real estate software, etc).

    I use a tool called "Style Master" that allows you to create visual css. It's been a good tool to have, worth the minimal money it cost.
     
    GTech, Apr 8, 2005 IP
  17. Webnauts

    Webnauts Peon

    Messages:
    133
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Webnauts, Apr 8, 2005 IP
  18. SoxFan

    SoxFan Peon

    Messages:
    90
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Hello,

    This is my first post, so be gentle...

    CSS vs Tables doesn't really matter if it is not used correctly. The real battle is between Semantic HTML and non-Semantic HTML.

    Properly formed, semantically correct web pages do not use tables for layout. According to the semantical defination of a table, a table is meant to display tabular data, making it unusable for layout. These pages are also automatically search engine friendly.

    Recently I worked on this site: http://securshred.com.

    Originally it was entirely table based, and was not within the top 500 for a Google search of "vermont paper shredder". Kind of hard to believe, being that they are probably the only one around. Two weeks after a complete semantic overhaul was completed, the site now ranks top 5 for the same search.

    A similar situation occured with another project of mine: http://networkinstallationcorp.com.

    This site was also entirely table based with CSS linked in. A simple search for "network installation" on Google yielded no results at all. After a semantic overhaul here, they now rank number 2 for the same search.

    Semantic HTML is also lightweight. Though you could go class or id happy and blow up the code that way. It also degrades wonderfully as users start to throw in screen readers and IE 4.

    So to me, the discussion is not just tableless vs tables, it should be whether or not we are using the HTML tags as they were meant to be used.
     
    SoxFan, Apr 14, 2005 IP