Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Is it sometimes ok to use tables for non tabular data?

Discussion in 'Website Design Forum:' started by Mark Alexander, Oct 17, 2010.

Thread Status:
Not open for further replies.
  1. Mark Alexander

    Mark Alexander Senior Member

    To put the cat amongst the pigeons,

    I don't think there's much wrong with using tables, especially for certain stuff, at the moment. The current CSS standard is useless for some common things. Yeah yeah we all love web standards but it's just not practical to spend hours working out some novel way to do what I want in CSS and to make it work across every browser when I know that tables work perfectly.
     
  2. Jazajay

    Jazajay Active Member

    O hear comes the cat, :lol:
    I have to admit I am so the other way trying to do it in tables would honestly take me far longer than coding it up in CSS. In fact I've had to go through 3 or 4 really old clients sites recently and what would have taken a 5 min job in CSS took 4 hours as the design was all table based and I mean all.

    Another one my boss actually said rewrite the whole thing it will be quicker, and my bosses have 100% financial heads, the job was to add a new header and make the side navigation, footer and header change background colour per page....what the client wanted I may add. :)

    But again I didn't argue as I totally agreed as it was a mess.

    Writing x-browser CSS is so easy far easier than writing the whole thing up in tables.

    #id{margin-top:10px} // all browsers
    #id,x:-webkit-any-link{margin-top:60px} // only webkit browsers, Safari, chrome
    #id,x:-moz-any-link{margin-top:100px} //only firefox

    Simplees. :)
     
  3. Renniks

    Renniks Senior Member

    I'm with Jaz here, there is no reason to use tables except for tabular data.
    They aren't designed for it, so it makes it more difficult, in general - some people will find this different
    But I think that's a lack of education (sorry if that offends you, I don't mean a lack of intelligence, but when shown how all the things work with css it just makes sense, how they float, interact, change, become maintainable, etc. etc. etc.)
     
  4. Mark Alexander

    Mark Alexander Senior Member

    The standard 'makes sense' for the things that it was designed to do, but CSS(2) is limited for a lot of basic layout stuff.

    Try doing vertical alignment, or have equi-sized/elastic containers and it's infinitely less complex with tables.

    I wouldn't even use something like faux-columns, it requires too much extra code to work in a totally cross browser way.

    All of these principled stands for CSS only design aren't pragmatic in the slightest. Try working on a huge array of different projects at once and coming back to code that you might not have seen in weeks or months. Code that's many times larger and more complex because you've used some nuanced solution to stick to a principle. Not fun.

    KISS
     
  5. Jazajay

    Jazajay Active Member

    Lets say you have one line of text and you want to centre it in a div.

    #id{margin-top:45%}

    Positions it 45% from the top of the div regardless of it's height, in otherwords centred. Simplees.

    Less than doing it in tables by a long way. :)

    What else do you struggle with and maybe I, or some other people, could give you a hand, overall it is far easier to work with when you have a good understanding and use it every day.
     
  6. Mark Alexander

    Mark Alexander Senior Member

    Well it's very nice of you to give yourself an overly simple non real world example.

    Not that it even works, you're assuming the line height is 10% anyway. There's a plethora of problems with that.

    Also I think you missed the point with faux-columns. You already know tables since they're simple HTML and you aren't having to memorize any new principles involved in the various faux column techniques. You have to know table syntax and function anyway, they're not a nuanced solution.
     
  7. Jazajay

    Jazajay Active Member

    Okay i seriously debate that.
    no thats not the case with the example I gave.

    #center{margin-top::45%}

    <p id="center">
    I am centred
    </p>

    The margin and padding take up the rest.
    But lets say you had a paragraph you know the div has a height of 100 pixels the text takes up 80 pixels of that div so vertical alignment either means giving top padding or top margin 10% and there it is vertically aligned. It all depends on the height of the element.

    The best one I've seen is you set the background colour the same as the main background colour and then only apply the main content section a different background colour.

    For example:
    <div id="container">
    <div id="header"></div>
    <div id="navigation"></div>
    <div id="main"></div>
    <div id="footer"></div>
    </div>

    Then CSS of
    #navigation,#header,#footer,#container{background:red}
    #main{background:#FFF;width:70%;padding-left:5%;min-height:400px}
    #main,#navigation{float:left}
    #navigation{width:25%}
    #footer{clear:both}

    Well-a a 2 column layout with the header, nav and footer with a red background and the main content section with a white background next to the navigation. Explain how either of those are 1 not real world or 2 mean longer code than coding it up in tables?
     
  8. Levi

    Levi Moderator Staff Member

    Jaz, this must be your birthday present, a debate about web standards etc, we all know how much you love the topic :p
     
  9. Jazajay

    Jazajay Active Member

    lol o yeeeeeah baby.:D
    Did my celebrating last night and now a debate on standards. I couldn't of wished for a better present. :lol:
     
  10. Mark Alexander

    Mark Alexander Senior Member

    For someone who was sardonically suggesting I ask him for help a moment ago you seem to lack any real understanding of laying things out with CSS,


    Which you don't know. Not even in an example where you had the opportunity to sway it in your favour.

    You don't know the line height, so you can't centre it.
     
  11. Jazajay

    Jazajay Active Member

    Slap on head, slap on head. :clap:
    No as normally I write:

    body{line-height:1.2em;font-size:80%}

    Then what I do is look in the different browsers and adjust as needed. Thought that was a given TBH. :)

    #center,x:-webkit-any-link{margin-top:40%}
    #center,x:-moz-any-link{margin-top:42%}

    Then its right x-browser. :D
     
  12. Mark Alexander

    Mark Alexander Senior Member

    If text is sized in ems then it's not relative to viewport size. When you change the size of your window the line height will stay the same. Thus your amazing centring technique falls flat.

    I can explain to you forever why it won't work, if you want to upload a demo of this somewhere I can quite easily screencap how it turns out.
     
  13. Jazajay

    Jazajay Active Member

    For the height it all depends on the design.

    But its easy use %'s for the paragraph height, height of the container and margin top then take into account padding and margin for the paragraph.

    But I can't say I've ever had one design where this has become an issue at all where I have had to go old school and bad coding and use tables to do it. ::down:
     
  14. br3n

    br3n Senior Member

    Mark Alexander, while I understand nothing you write (or you jay) I like you :)
     
  15. Levi

    Levi Moderator Staff Member

    ok maybe I'm just not understanding it all and being new at this (I am not web designer) but can't you just use "vertical-align: middle;" in the css to 'vertically' centre the text and then use "position: absolute; top: 50%;" to centre a div which would hold said text?
     
  16. Mark Alexander

    Mark Alexander Senior Member

    This is ridiculous.

    You're breaking 10 good practices to uphold one.

    Your centring method doesn't work. At all. You can't know the size of the text. And even if you could know it, in 90% of cases you don't know the height of containers with text in them.

    Adjusting % points by eye based on how it looks in browsers on your screen on your computer is beyond laughable. So is the idea that making 20 different rules for different browsers sticks to the principle of keeping things simple.


    Thanks, maybe we should do dinner and a movie. Do you like seafood?
     
  17. Jazajay

    Jazajay Active Member

    @Br3n
    Whys that dude? :D
     
  18. Jazajay

    Jazajay Active Member

    Yes Levi for the tiny times you would need to use this that would also work dude. :D
    Really explain where using HTML tables for layout just to get things to vertically align comes in with web accessibility coding? SEO? Page preformance? Semantics? W3C? Good coding practise?

    And go on name those 10?
     
  19. Levi

    Levi Moderator Staff Member

    And believe it or not I have just realised that without realising it I figured out a 'possible' way of dealing with my own sites text lol I can now consider doing one set of divs and applying the vertical align bit instead of new div's on each page :rolleyes:

    Your essays do come in handy from time to time :p
     
  20. Mark Alexander

    Mark Alexander Senior Member

    It doesn't? That's the one good practice you're trying to uphold in the face of doing other much worse things.

    Like ignoring the fact that your layout only works under the very specific circumstances of being viewed in your browser(s) on your computer.

    Might as well position it absolutely and use top: 500px if you're gonna do the % by eye like that. It's the same thing pretty much.

    If you're so concerned about accessibility, why don't you introduce your layout to CTRL+Scroll Wheel, as many people who need larger text will do, for example. It won't turn out well.
     
Thread Status:
Not open for further replies.

Share This Page