When to succumb to a <table>?



  • I like CSS. I really do. I like being able to take a bunch of layout agnostic DIVs, give them a few css classes, and poof, pretty page.

    But damned if I don't end up wanting to bitch-slap it with a sacrificed chicken.  Things don't center properly. IE overflows in the weirdest way. Something somewhere along the lines overrides a font setting, and some random div ends with with Arial instead of Verdana.

    The solution that is always pitched is, "Well, why don't you use a table for layout"? I try not to, because I now how it will end up-- with a horribly bloated, unreadable mess of HTML that's impossible to change, has tables nested six levels deep, and style tags copy-and-pasted into every single <TD>

    But, for the most part, it works. Horizonal and vertical alignment are a breeze. Fluid widths just magically happen.

    But it feels like turning a blind eye to the puppy-raper, because the animal shelter is so orderly and quiet when the press comes around for your photo-op.

    So what about you guys? When it comes to the divide between div+css vs. tables, where's that {border: line thin grey}, and what would push you over it, one way or the other?

     



  • Some people here don't write or don't (yet) understand CSS, so they're all, Why not a table?

    Eveybody else, like me, knows CSS and doesn't use tables.

    I'm fully aware of the vertical centering benefits a table offers, so I decide on a case by case basis what I do. Usually it involves not using a table because the generated HTML is cumbersome to maintain.

    Fluid layouts, however, are not the exclusive domain of tables.

    So in other words, this discussion is the same as the age old debate of single-return vs multi-return, it's down the crapper before it even began, and if you have any real, immediate, serious questions, post them and you'll probably get a real good answer.



  • Table is very good to organize data in rows and columns. Table should not be used for layout, just use normal layout (put some menus at the top, some at the bottom, use horizontal rules or headings to separate contents)


  • Discourse touched me in a no-no place

    CSS is made of fail and lose when you have a designer who insists on pixel-perfect alignment across all platforms.

    That's when you use tables.



  • @Weng said:

    pixel-perfect alignment across all platforms.

    That's when you use tables.

    Untrue.

    Tables fail spectacularly in the pixel-perfect area. When you set a div to X wide in CSS, it will absolutely, with 100% certainty become X wide. With tables? Depends. Want to force it? Shit out of luck.



  • @dhromed said:

    Tables fail spectacularly in the pixel-perfect area. When you set a div to X wide in CSS, it will absolutely, with 100% certainty become X wide. With tables? Depends. Want to force it? Shit out of luck.
     

    This.

    Every challenge I've had in terms of layout via CSS has been achievable with effort. Albeit, during this effort you lose a good chunk of hair, imbibe too many beers, and want to drop kick your laptop, and sometimes it requires some kind of hack for it to work cross browser. The thing is, there's always a solution, and once you find that solution you often discover a new CSS technique you didn't think of before, and you end up wiser. With tables, there isn't always a CSS solution. It's a solution that requires you to make all kinds of rowspans, colspans, width="*", and in 6 weeks, when someone says they want to put an extra block of text in there, you have to look at what you did and try to remember how your table was laid out, and follow all those widths, rowspans, and colspans all over again.

    Tables are a hell to maintain when you use them in situations they're not designed to be used in. 



  • @dhromed said:

    @Weng said:

    pixel-perfect alignment across all platforms.

    That's when you use tables.

    Untrue.

    Tables fail spectacularly in the pixel-perfect area. When you set a div to X wide in CSS, it will absolutely, with 100% certainty become X wide. With tables? Depends. Want to force it? Shit out of luck.

     

    Oh you can force it alright. Just add more tables into the mix and simply use some transparent pixel gif images for padding and margin. Do not question the sacred 3x3 table.



  • @stratos said:

    Just add more tables into the mix and simply use some transparent pixel gif images for padding and margin. Do not question the sacred 3x3 table.
     

    I { -R, {0-[2 + (1 - 1/INF)]} } that.



  •  No idea what you mean by that actually. I'm sure it's witty but googling for it seemed quite futile.



  •  It's an amateurish attempt at expressing <3 using set notation and the Real numbers.



  •  Thanks for the insight so far, guys. No, I didn't have a specific problem in mind. It's just that using a Babushka doll of tables makes me feel dirty, but will (sometimes) achieve the layout the design document's Photoshop-generated screen mockup. The boss like tables because he started the company in the 90s, and the other programmers use them because they don't know CSS.

    So I try to push through some div/CSS layouts whenever they're quick and work and can slip under the radar-- but often get ratted out by some version of IE deciding to put a lampshade on it's head while eating paste.

    The only time I was really vindicated was when I got to use CSS to do this:

    - Take a 100% width block.

    - Put two elements inside of it: a Title, and a hyperlink.

    - The hyperlink should be justified-- either right or left.

    - The Title should be centered in the 100%

    - The Title's bottom and the hyperlink's bottom should be at the same height

    Any table layout anyone else came up with would center the title in the space that remained after the hyperlink took it's own Width-- or the hyperlink would end up in a second row (and thus noticeably lower than the title). 



  • @Lorne Kates said:

    It's just that using a Babushka doll of tables makes me feel dirty,
     

    It doesn't have to make you feel dirty. Tables are objectively worse code to maintain and create.

    @Lorne Kates said:

    achieve the layout the design document's Photoshop-generated screen mockup.

    All I can say is; get better at CSS.

    @Lorne Kates said:

    the other programmers use them because they don't know CSS.

    Div up tasks: have a guy do (or specialize in) layout (like you), while the rest just writes program code and doesn't touch the HTML.

    @Lorne Kates said:

    - Take a 100% width block.
    - Put two elements inside of it: a Title, and a hyperlink.
    - The hyperlink should be justified-- either right or left.
    - The Title should be centered in the 100%
    - The Title's bottom and the hyperlink's bottom should be at the same height

    That's some really, really basic stuff there. ;)

     

     

     



  • We've had this debate before, so I'm not going to post a big rant, but just link to an older thread. Read that if you have an hour to spare.

    Summary: CSS is a fucking terrible technology, designed by academics who obviously have no clue what layout features actual websites require (so that pretty much everything you do in it is technically a work-around for a missing feature, usually columns), and the justification for its invention is a huge ball of bullshit (a CMS separates content and layout, and already existed before CSS). But it's probably still marginally better than doing layouts using tables.



  • @blakeyrat said:

    (a CMS separates content and layout, and already existed before CSS)
     

    You do realize that a CMS (at least modern ones) uses CSS? A browser can't just get a layout definition from a CMS and render it on the page. And pre-CSS CMSes did NOT separate content and layout in the HTML, which introduces accessibility issues and can make a mess out of search results, prompting the desire to separate the layout/style from the HTML in the first place. All CMSes do is abstract the content and layout for you, the web publisher, but not for the browser or the readers.



  • @RHuckster said:

    You do realize that a CMS (at least modern ones) uses CSS?

    Yes, modern ones do. It would be stupid if they didn't. But that was given as a reason to develop CSS in the first place, and it was bunk then.

    @RHuckster said:

    And pre-CSS CMSes did NOT separate content and layout in the HTML, which introduces accessibility issues

    Like...?

    @RHuckster said:

    and can make a mess out of search results

    Like...?

    @RHuckster said:

    All CMSes do is abstract the content and layout for you, the web publisher, but not for the browser or the readers.

    Why would the browser or readers care? Sites that obviously use ancient, creaking CMSes are quite popular. JC Penney is one of the most-used e-commerce sites in the US. Take a look at their source code.



  • @blakeyrat said:

    Yes, modern ones do. It would be stupid if they didn't. But that was given as a reason to develop CSS in the first place, and it was bunk then.
     

    Some people like to develop in raw HTML and CSS instead of fumbling with CMSes that don't always work. I don't understand: You first say CSS is crap, then say it would be stupid if CMSes didn't use them. Which is it? If you prefer to develop websites using a CMS, then fine. Go for it, nothing wrong with that. It doesn't mean CSS is crap (granted I do agree CSS could have been implemented much better, especially in regards to layout options). That's like saying binary code is crap because you like to use C++.

    @blakeyrat said:

    @RHuckster said:
    And pre-CSS CMSes did NOT separate content and layout in the HTML, which introduces accessibility issues

    Like...?

     

    http://www.mardiros.net/css-layout.html

    @blakeyrat said:

    @RHuckster said:
    and can make a mess out of search results

    Like...?

    The article above applies to search engine crawlers who would have a hard time following the flow of language in a table based layout.

    @blakeyrat said:

    @RHuckster said:
    All CMSes do is abstract the content and layout for you, the web publisher, but not for the browser or the readers.

    Why would the browser or readers care? Sites that obviously use ancient, creaking CMSes are quite popular. JC Penney is one of the most-used e-commerce sites in the US. Take a look at their source code.

    And JC Penny could very well be breaking the Americans With Disability Act in the process, just as Target was in the past.



  • @dhromed said:

    @Weng said:

    pixel-perfect alignment across all platforms.

    That's when you use tables.

    Untrue.

    Tables fail spectacularly in the pixel-perfect area. When you set a div to X wide in CSS, it will absolutely, with 100% certainty become X wide. With tables? Depends. Want to force it? Shit out of luck.

    Agree 1000 %.



  • @RHuckster said:

    Some people like to develop in raw HTML and CSS instead of fumbling with CMSes that don't always work. I don't understand: You first say CSS is crap, then say it would be stupid if CMSes didn't use them. Which is it? If you prefer to develop websites using a CMS, then fine. Go for it, nothing wrong with that. It doesn't mean CSS is crap (granted I do agree CSS could have been implemented much better, especially in regards to layout options). That's like saying binary code is crap because you like to use C++.

     

    I don't share blakeyrat's full opinion on the subject, but he said

    But it's probably still marginally better than doing layouts using tables.


     



  • @stratos said:

    I don't share blakeyrat's full opinion on the subject, but he said

    But it's probably still marginally better than doing layouts using tables.

    My full advice (given in the thread I linked to) is more accurately:

    If you have an existing, working, table-based layout don't bother changing it to CSS until you're planning on doing a big remodel anyway.



  • @blakeyrat said:

    If you have an existing, working, table-based layout don't bother changing it to CSS until you're planning on doing a big remodel anyway.
     

    I can concur with that. I'm not sure why what I quoted above wasn't following the word "Summary:" in your first post in this thread, though.



  • @blakeyrat said:

    If you have an existing, working, table-based layout don't bother changing it to CSS until you're planning on doing a big remodel anyway.
     

    Well, fuck you and your pragmatic approach, you total dick.

    /instaban



  • @Lorne Kates said:

    Any table layout anyone else came up with would center the title in the space that remained after the hyperlink took it's own Width-- or the hyperlink would end up in a second row (and thus noticeably lower than the title).

    Not that I'm advocating it, but couldn't you do this in a table layout by having a three column table with say 25% each for the first and last columns, 50% for the middle one, centre the title in the middle one and align the hyperlink left or right in the first or third column respectively?



  • @Scarlet Manuka said:

    @Lorne Kates said:
    Any table layout anyone else came up with would center the title in the space that remained after the hyperlink took it's own Width-- or the hyperlink would end up in a second row (and thus noticeably lower than the title).

    Not that I'm advocating it, but couldn't you do this in a table layout by having a three column table with say 25% each for the first and last columns, 50% for the middle one, centre the title in the middle one and align the hyperlink left or right in the first or third column respectively?
     

     In theory you could, as long as:

    1) that link on the right (or left) doesn't take up more than 25% of the space, or else it will grow the column and break the title

    2) Nothing else you put in the right or left columns on further rows goes more than 25%

    3) No browsers go "well, I guess that means UP TO 25%" and shrink the column

    4) You remember to properly colspan every single row in the table to account for those extra columns


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.