dcsimg
www.webdeveloper.com
Page 1 of 9 123 ... LastLast
Results 1 to 15 of 125

Thread: Tables Vs CSS

  1. #1
    Join Date
    Jul 2007
    Posts
    39

    Tables Vs CSS

    For a while now i have seen over and over again people talking about how "bad" it is to use tables for layouts. I have made countless layouts with tables over the past few years and very rarely have I had any cross-browser viewing issues, but whenever i do layer/css-only sites I have to fight it like crazy and usually have to compromise in order for it to work on multiple browsers. Some things i still haven't found a real solution to; such as making layers stretch 100% height without using some extremely distasteful hack like setting the bottom margin to an incredibly high number and offsetting it with a negative padding. with a table i could solve that issue in about 30 seconds, instead i have come to the point multiple times of spending hours trying to find a reasonable solution. (if you know of any please let me know!)

    One thing i have read is an author who claimed tables are bad because of "excessive usage of spacer gifs".. I have seen this done before by some people (as well as photoshop's way of exporting sliced layouts), but whenever i slice and code a layout, 99% of the time i do so to where there are absolutely no spacer gifs, and the layout is expandable both by width and height. I cant remember the last time i used a "Spacer gif"... perhaps when i was 14.

    Another reasoning i have heard is that filesize is smaller when using layers. This may be true for a simple [header, 2-column, footer] layout, but I have to disagree when it comes to compex layouts that require full stretchability with intense graphics.. the size of the css file alone becomes more than what the table html uses. not to mention the number of layer elements required to layer on one another to get the desired effects.

    despite being doubtful, i have jumped on the bandwagon of the new trend and hopefully will find a good reason to keep from using tables in the critical areas.
    my latest project in the making is diffusionstudios.com which i have got working in all browsers (ie, ff, ns, opera) except a small issue in safari i havn't worked on yet.

    So I was just curious to see some of your input and opinions on the subject of css vs tables.

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774

  3. #3
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    What about the 99% of possible page layouts that can't be done using tables where you have no choice but to use CSS?

  4. #4
    Join Date
    Jul 2007
    Posts
    39
    Quote Originally Posted by felgall
    What about the 99% of possible page layouts that can't be done using tables where you have no choice but to use CSS?
    do you have an example?

  5. #5
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Any layout where two elements overlap can't be done with tables but can be easily done with CSS. There is an example on http://www.felgall.com/cshow09.htm that shows how easy it is to overlap things with CSS while of course with tables they can't overlap at all.

    Any layout that doesn't have a rigid grid structure can only be done by building huge grids wiith tables and using lots of colspan and rowspan but can be easily done with CSS. Example see http://javascript.about.com/library/blpiano1.htm where the piano keyboard is drawn with 65 divs and 5 lines of CSS instead of a 105x5 table (which is what I saw used for a similar script)

  6. #6
    Join Date
    Jul 2007
    Posts
    39
    Quote Originally Posted by felgall
    Any layout where two elements overlap can't be done with tables but can be easily done with CSS. There is an example on http://www.felgall.com/cshow09.htm that shows how easy it is to overlap things with CSS while of course with tables they can't overlap at all.

    Any layout that doesn't have a rigid grid structure can only be done by building huge grids wiith tables and using lots of colspan and rowspan but can be easily done with CSS. Example see http://javascript.about.com/library/blpiano1.htm where the piano keyboard is drawn with 65 divs and 5 lines of CSS instead of a 105x5 table (which is what I saw used for a similar script)
    As far as the scroll, I personally find it to be less desirable to use a static image when overlapping with any text, especially when most of my work is using dynamic content. So, for arguments sake, i took your goal of the scroll, and took it one step further: http://diffusionstudios.com/temp/scroll/scroll.html

    Now, it will automatically expand to fit the text inside, using tables. Yes it can be done with layers, and just expanding vertically is pretty easy with layers as well (3 layers, fist contains the center bg, and then the following 2 layers contain the top and bottom overlay image). but what if you wanted to make it expand horizontal, too? you will end up with an excess of un-needed code that probably is going to be really buggy between browsers.. but with tables, you'd have 7-9 cells that work in every browser.

    also, the way i use tables, i never use colspans or rowspans unless its displaying raw data and its required. when it comes to layouts i subdivide groups into new tables to ensure proper rendering. Ive seen browsers act too funny when it comes to colspans and fluid content.

    As for the piano, i agree something like that should use layers, I was aiming my rant/discussion more towards the actual layouts of websites.
    Last edited by gradez28; 07-03-2007 at 08:11 PM.

  7. #7
    Join Date
    Jul 2007
    Posts
    39
    btw im not here to cause a heated argument, i just like having a friendly debate to see other people's point of views.

  8. #8
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    The difference between the piano built with divs and with tables is no different from the situation with most web pages done one way or the other.

    Also if you use tables then people using a web reader can't access your page properly and neither can people using mobile phones and other handheld devices. Using CSS allows you to define alternate layouts for those people.

  9. #9
    Join Date
    Jul 2007
    Posts
    39
    Quote Originally Posted by felgall
    The difference between the piano built with divs and with tables is no different from the situation with most web pages done one way or the other.

    Also if you use tables then people using a web reader can't access your page properly and neither can people using mobile phones and other handheld devices. Using CSS allows you to define alternate layouts for those people.
    The ability to dynamically change the entire css definition is one of the reasons i love CSS, however if i were to go as far as making sure my sites are compatible with mobile devices, i would simply either redirect them to a url such as mobile.domain.com, or use an html preprocessor to cloke the output specifically for them to ensure only the data required is shown. Otherwise if you rely solely on css for the compatibly, throughout the whole development and maintenance processes you'll have to keep in the back of your mind "well, is this going to work right for mobile devices?" and often times you will have to compromise for a layout/feature you want, just so that you can have multiple css layouts. A good example is if you want to have, say a 120x600 skyscraper google ad on the side (quite distastful, but hey, its advertising), you probably don't want to show that to your mobile users as it will consume a large part of their scroll bar. Sure, you can just hide that layer with css, but then you run into a TOS predicament with google which can get you banned. I know this has nothing to do with tables directly, but unless you have a super simplified blog, i wouldn't ever suggest a webmaster to try making a single page compatible for standard browser and mobile viewers all in one - thus [in my reasoning] eliminating that as a selling point for layers vs tables.

    Do you have any other examples of functional website layouts that "cant" be done with tables?

  10. #10
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    do you have an example?
    http://csszengarden.com

    The web has evolved beyond the concept that the layout is handled by the markup. The markup should deliver semantically correct content; the presentation handled by semantic-free elements (div, span) and CSS. A table has a semantic meaning and it almost never coincides with the presentation of a full page.

  11. #11
    Join Date
    Jul 2007
    Posts
    39
    Quote Originally Posted by ray326
    I could recreate any of those layouts using tables, and if i desired to offer more than 1 skin, i would simply whip up a simple php template engine. (not saying that i would always choose tables over layers though, like the site i mentioned above i constructed without a single table)

    Quote Originally Posted by ray326
    The web has evolved beyond the concept that the layout is handled by the markup. The markup should deliver semantically correct content; the presentation handled by semantic-free elements (div, span) and CSS. A table has a semantic meaning and it almost never coincides with the presentation of a full page.
    but who is to say that using the markup for design structure is "bad", when its been done that way for 16 years? Im looking for reasons why people are so disgusted with tables; especially when often times they don't even know why, other than hearing other people talk about how "bad" it is.

    dont get me wrong, i think css is wonderful and i use it as much as i can; its just that more times than not, tables offer a more fluent solution to issues than layers do.

    Just because people are switching to new VOIP phone systems, does that make regular telephone "bad" or looked down upon?
    Last edited by gradez28; 07-04-2007 at 01:29 AM.

  12. #12
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Tables were never intended for layout in the first place. The only reason that they got used for layout was that prior to the introduction of CSS there wasn't any other way of doing anything but the most simple layouts and tables made not quite so simple layouts possible. CSS of course can do anything tables can do in way less code and do it in an external file so that only one copy is needed for the whole site.

    Imagine that you have a three column layout for a 10,000 page web site and the client decides they want to switch columns one and three. With tables you have 10,000 pages to change, with CSS you have perhaps half a dozen line of code to change.

  13. #13
    Join Date
    Mar 2004
    Posts
    3,081
    Personally, I hate CSS. CSS 2.1 hasn't even reached the "Recommendation" status yet and it's very poorly supported in the web's most widely used browser. To make matters worse, we now have two versions of the web's most popular browser, each of which is still incapable of doing their job and each incapable in different ways. So now cross-browser compatibility is tougher than ever. I also think the behaviour of CSS makes far less sense than it should. I'd love to know who decided there was no need for a proper column system.

    That said, I still won't use tables for layout. I strongly dislike CSS, but I dislike doing things wrong and producing poor quality work even more. To me, using tables just doesn't make any sense. The only viable course of action I see is to just put up with what we have and learn to use it as best we can.

    I think we've a very long way to go before CSS comes close to being as useful as it should be, but it's still the best tool for the job.
    I'm thuper, thanks for asking.

    It lives! http://www.stephenphilbin.com/ (Well it kinda' does anyway).
    My portable colour selection tool

  14. #14
    Join Date
    Jul 2007
    Posts
    39
    Quote Originally Posted by felgall
    Tables were never intended for layout in the first place. The only reason that they got used for layout was that prior to the introduction of CSS there wasn't any other way of doing anything but the most simple layouts and tables made not quite so simple layouts possible. CSS of course can do anything tables can do in way less code and do it in an external file so that only one copy is needed for the whole site.

    Imagine that you have a three column layout for a 10,000 page web site and the client decides they want to switch columns one and three. With tables you have 10,000 pages to change, with CSS you have perhaps half a dozen line of code to change.
    lol i would hope that if you have a website with 10,000 pages, your not using a seperate file for each ones' global markup. that my friend is being stuck in the 90's I actually have a website with over 40,000 pages (an article site) and youd be amazed at how easily i can modify the layout on every page, without relying only on a css file to do so.

    Just curious, would anybody here be interested in a show-down? I will make a psd of a complex layout, and we can see who can slice it up into xhtml/css using the less code with each person's preferred method - but it must work in the top browsers (ie, ff, ns, opera) and have the ability to stretch width/height wise seamlessly. could be a fun little project.
    Last edited by gradez28; 07-04-2007 at 04:34 AM.

  15. #15
    Join Date
    Mar 2005
    Location
    Sydney, Australia
    Posts
    7,974
    Let's use a design with overlapping elements then so that you have to slice it into itsy bitsy pieces in order to get it to work with a table and to be absolutely fair let's have it have the overlapped parts able to be moved with JavaScript and finally let's set a realistic maximum size for the page.

    Let's also require different layouts for print and handheld devices and give visitors the choice of five different screen layouts.

    It all has to be done as a single page.

    I'll even give you a week's head start so that you can work out how to do the layout with tables and try to figure out how to squash all of the code into the allowed file size.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles