1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Tables or CSS?

Discussion in 'CSS' started by manofmany, Feb 8, 2008.

  1. #1
    The general consensus around here seems to be CSS and around my graphic design forums it seems to be tables. Is CSS a better choice than using tables? Does it always render faster? I'm looking for honest opinions and possible reasons why CSS is better used.
    SEMrush
     
    manofmany, Feb 8, 2008 IP
    SEMrush
  2. nfd2005

    nfd2005 Well-Known Member

    Messages:
    295
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    130
    #2
    It's a matter of preference. I prefer CSS because it is a lot more flexible than tables.
     
    nfd2005, Feb 8, 2008 IP
  3. whiteblue1942

    whiteblue1942 Peon

    Messages:
    573
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #3
    css=better
     
    whiteblue1942, Feb 8, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,529
    Likes Received:
    1,933
    Best Answers:
    247
    Trophy Points:
    515
    #4
    Deceased equine territory, but here's my view:

    BOTH have their place - the problem is a LOT of people on both sides of the arguement will only use one to the exclusion of all others... But first you need to stop saying 'tables or CSS" since you can style tables WITH CSS, removing all presentational attributes leaving just the tags with some classes - which in general shoots down a LOT of the arguements against tables. I prefer to say "Div based or table based" since CSS can be used on both.

    The problem is NOT tables, and most of the arguements against tables hold water like a steel sieve... The PROBLEM is people overusing tags nesting upon nesting upon nesting upon nesting.

    Tables can render as fast - if table-layout:fixed is set. They can often be less code since quite often the desired behavior (columns for example) is already in place... There are things tables can do that DIV/CSS

    DIV's with CSS on the other hand also has advantages: 'content first' is easier to do, using techniques like "sliding doors" makes doing border images actually EASIER, with less image files (as few as ONE for all 8 corners!), and best of all you can with a properly coded website change the entire layout COMPLETELY from the CSS - as evidenced by this excellent site on the subject:

    As I've said several dozen times on this forum ALONE, the people who made crap nonsensical nested tables resulting in fat bloated code, when they drink the "tables are evil" kool-aid churn out crap nonsensical nested DIV's resulting in fat bloated code. Change zero.

    You see it time and time again on site after site. The solution is NOT to throw a perfectly good tool that has powered the largest successful sites on the web in the trash because it's 'trendy' or because someone is calling valid markup a 'hack' (while they themselves dive knee-deep in REAL hacks, conditional comments and other rubbish just to not use a table) - Nor to blindly ignore new and different ways of doing things just because the people advocating them are so zealous (continuing to churn out nonsensical rubbish like making tables containing single TD's)

    The goal should be clean minimalist valid markup without overthinking the solution to every problem.
     
    deathshadow, Feb 8, 2008 IP
  5. scylla

    scylla Notable Member

    Messages:
    1,025
    Likes Received:
    33
    Best Answers:
    1
    Trophy Points:
    225
    #5
    I like to use a combination of css and tables.
     
    scylla, Feb 8, 2008 IP
  6. manofmany

    manofmany Peon

    Messages:
    25
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Excellent posts and great opinions. Deathshadow, I was particularly hoping you would chime in which you did.
     
    manofmany, Feb 8, 2008 IP
  7. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #7
    This is what w3c sais about tabled layout:

    If you really need to, use tables but... there's no reason for it now when css has 100% support in all browsers.
     
    risoknop, Feb 8, 2008 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,529
    Likes Received:
    1,933
    Best Answers:
    247
    Trophy Points:
    515
    #8
    NOT entirely true - on either count.

    First, the top two browser engines (gecko and trident) still have huge gaping holes in their implementations of CSS2 and HTML4, making a LOT of things impossible to deploy. (which is why their even TALKING about working on getting CSS3 and HTML5 working - ANY parts of it working just pisses me off - here's an idea, how about they polish off the DECADE OLD HTML4/CSS2 FIRST?!?)

    Second, there are things a table can do that CSS simply CANNOT accomplish. There are three situations where a table is the 'only tool for the job':

    1) When faux columns just 'won't cut it' - example: complex background patterns in a dynamic layout with the images aligned to the bottom of the content.

    2) vertical positioning other than 'top' of dynamic height content. CSS still can't center vertically worth **** without using a td. Sure you can kind of fake it with display:table-cell, but given the knee deep hacks and workarounds to get it in all browsers, the net result is a total /FAIL/

    3) When the layout requires more hacks for cross browser support than it has code to not use a table. At that point, bite the bullet and use the table. For all the 'talk' about non-table layouts being less code, PROPERLY CODED table layouts can end up as lean or leaner on code.

    Seriously, let's see a CSS layout that does THIS:
    http://battletech.hopto.org/for_others/3coltable_SEO/template.html

    in as little code, as cleanly, and in all browsers back to IE 5.x without a single REAL hack in sight! (though there is plenty of chicanery)
     
    deathshadow, Feb 8, 2008 IP
  9. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Lol. No problem doing that in CSS.

    I think there's no problem with it? You mean sticky footers or what?

    This isn't so big issue anymore and it will only get better. Only problem is with people that never upgrade their software and still are using some ancient browsers.

    There are some hacks to overcome this but I agree it's difficult.
     
    risoknop, Feb 9, 2008 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,529
    Likes Received:
    1,933
    Best Answers:
    247
    Trophy Points:
    515
    #10
    Notice the 100% min-height with auto-stretch? At very least you'll be resorting to a conditional comment to target IE6/earlier to fake it. If you're thinking absolute positioning the footer - /FAIL/.

    I have a 100% min-height container, or a container that stretches to the height of a container NEXT to it - try positioning an unknown amount of text vertically centered next to it... It's one of the most common layout questions and time and time again the answer is 'table cell, but that doesn't work in ______', use a table, or you're SOoL (**** out of luck). If you don't know how tall the content OR it's container is going to be, centering it vertically - or even making it flush bottom is nigh impossible without resorting to the behaviors a table brings... to the table.

    Or are unable to do so because unlike uber-geeks like us they have problems updating their hardware every three years. Remember, there is no IE7 for Win98/2K, much less Windows CE 5 and earlier... and forget not all the mac users with 'old world' G3's/earlier that won't even run OSX even with xPostFacto fudging the install.

    Or the people in business environments who have garbage in-house crapplets that won't let them upgrade XP past SP1 - they are legion.
     
    deathshadow, Feb 9, 2008 IP
  11. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #11
    lol @ someone (who probably wrote the code above) tryin to tell deathshadow the possibilities of CSS.. dude has thousands of hours more experience than anyone on this forum.
     
    soulscratch, Feb 9, 2008 IP
    VimF likes this.
  12. SamBerns

    SamBerns Peon

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    CSS can be used with tables. But I assume by CSS you mean divs. I would personally choose CSS using divs. It makes your code less clustered and easier to find certain sections.
     
    SamBerns, Feb 9, 2008 IP
  13. LittleJonSupportSite

    LittleJonSupportSite Peon

    Messages:
    386
    Likes Received:
    20
    Best Answers:
    0
    Trophy Points:
    0
    #13
    The saga continues...

    DIV vs. Table

    O am convinced this will never end because they both have their have their own explicit purpose.

    However can me be easily integrated to either so it falls under "coder preference".

    It does not make one "better" then the other it is a matter of which is better suited for the application.

    I find my self falling into the trap of using tables more and more for spread sheet type functionality for financial reporting purposes at my company.

    Does this mean I couldn't do it another way? of course not. Just ends up being the cost efficient way (quickest utilizing my time)
     
    LittleJonSupportSite, Feb 9, 2008 IP
  14. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #14
    Hey yall its been a while on this forum lol.

    Yea SamB, I definitely agree with you on that one man with Deathshadow being the most experience person on this forum.

    Sup D, still the man and ruling this forum eh lol.

    My opinion is CSS by far thats only cause I want to minimize a lot of coding for faster downloading lol.

    CHEERS :)
     
    buckmajor, Feb 10, 2008 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,529
    Likes Received:
    1,933
    Best Answers:
    247
    Trophy Points:
    515
    #15
    Which is the strongest arguement in favor of separating presentation from content - which is what the "DIV/CSS" vs. "Table" folks should be arguing in favor of (one look at the code from some of those folks... well)

    Especially since if you condense everything down to one stylesheet (the LARGEST site I've ever written only had a 32k stylesheet) you can pre-cache results across multiple pages on the same site, AND have better cache hits because of the common elements. DIV based or Table based, moving as much presentation out of the markup as possible into the CSS (and as much behavior out of the markup and into an external .js) will result in significantly faster pageloads and lowered bandwidth requirements the moment the user visits more than just your landing page.

    OTOH, multiple files means more handshaking - so if the files are really small you can end up slower... Savings on handshaking though are usually better done via image recombination than by worrying about code... Even so, if you have more than one CSS file per media type, you are probably doing something wrong.
     
    deathshadow, Feb 10, 2008 IP
  16. gobbly2100

    gobbly2100 Banned

    Messages:
    906
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #16
    I used to be a table designer but since learning CSS I have never thought to go back, so much less coding and clutter on your pages too, my first site I converted from a table design to CSS went from 62k to just 16k which kinda sows you how much unnecessary code was on that page really.
     
    gobbly2100, Feb 10, 2008 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    I never learned to build sites with tables, so it's kinda like IF I never need to (vertical positioning of dynamic content etc) I'll prolly be screwed. Likely, knowing me, I'll use more code to fake it with pure CSS. So long as the site itself isn't huge, or doesn't get huge traffic (I don't expect any of them to, but one never knows), I'm okay with that.

    Hell, I'd be happy with display:inline-table working on every major browser. I never use it because someone (I think gecko) doesn't understand it. It's like, let's make a language everyone can speak... oh, but you don't understand a bunch of words, and someone else doesn't understand some other words... esperanto ftw.
     
    Stomme poes, Feb 11, 2008 IP
  18. ChaosFoo

    ChaosFoo Peon

    Messages:
    232
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Just a quick question DeathShadow.

    Which do you find is more effecient:

    1-Multiple external JavaScript files that are only loaded to the page when needed.

    OR

    2-All JavaScript functions in one external JavaScript file.

    I'm facing this issue right now, and I thought I would ask a pro.
     
    ChaosFoo, Feb 11, 2008 IP
  19. BoBByCooL

    BoBByCooL Peon

    Messages:
    335
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #19
    I would go with whatever seems to work best. If it's going to take you forever to set up something with CSS/div combo then use tables. I'm old school so I probably use more tables that I should but, when used at the right times, they still have their place.
     
    BoBByCooL, Feb 11, 2008 IP
  20. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    105
    #20
    I would stick them all in one file, because it's less HTTP requests and only 1 file would get cached, rather than 2+ http requests and 2+ files getting cached.
     
    soulscratch, Feb 11, 2008 IP