SitePoint Sponsor

User Tag List

Page 1 of 3 123 LastLast
Results 1 to 25 of 68
  1. #1
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why would you use tables instead of table-less method (CSS/Div) for website layout

    Quick question,

    I'm having an on-going discussion with someone about why you should not be using tables for website layout and for reasons of good practice you should be going table-less (CSS/Div). Apart from the obvious semantic, SEO, accessibility, usability issues caused by building website solely in tables. I'm all in favour for tables, when used correctly i.e. tabular data etc but he keeps on insisting in doing everything in tables!

    What do you think are benefits and reasons for going table-less for website layout?

    Si

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We just had this discussion, you might want to read through this thread and pay particular attention to AutisticCuckoo's replies:

    http://www.sitepoint.com/forums/showthread.php?t=535196
    Dan G
    Marketing Strategist & Consultant

  3. #3
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    We just had this discussion, you might want to read through this thread and pay particular attention to AutisticCuckoo's replies:

    http://www.sitepoint.com/forums/showthread.php?t=535196
    That’s great and after a quick read I think that it reaffirms my points made above - I shall read it fully in a bit. No idea how I missed it when I search. Cheers.

    Si

  4. #4
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So there is no real definitive yes or no to this question, pros and cons to each - it seams that it more down to developer preference… needs more thought.

    Si

  5. #5
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, there is a definitive no to table-based layouts.
    Dan G
    Marketing Strategist & Consultant

  6. #6
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    No, there is a definitive no to table-based layouts.
    I know and that's my view on the subject but from reading that threat it seams that the actual benefits are negligible.

    Si

  7. #7
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by si@ld View Post
    So there is no real definitive yes or no to this question, pros and cons to each - it seams that it more down to developer preference… needs more thought.
    No, we already have something called web standards. http://www.google.com/search?q=define%3A+web+standards

  8. #8
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by junjun View Post
    No, we already have something called web standards. http://www.google.com/search?q=define%3A+web+standards
    Agreed but my argument is that web standards while good practice holds no leverage or authority over a designer/develop who insists on developing everything in tables. Strange comparison - it's not like the UK building trade, where everything has to be signed off by the local council building inspector. Good practices are just guidelines so it’s up to the developer to follow them.

    Si

  9. #9
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With regards to the UK, the Disability Discrimination Act actually covers websites:

    http://www.webcredible.co.uk/user-fr...irements.shtml

    And really, your developer should prefer a css driven layout for the reasons outlined in the other thread.
    Dan G
    Marketing Strategist & Consultant

  10. #10
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by si@ld View Post
    Agreed but my argument is that web standards while good practice holds no leverage or authority over a designer/develop who insists on developing everything in tables.
    Of course not if they insist. I would just consider them less professional and their product of less quality and value

    I can use a toaster to drive a nail in the wall as well

  11. #11
    SitePoint Addict
    Join Date
    Oct 2006
    Posts
    292
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guys totaly agree, just need to convert people

    Si

  12. #12
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Converting people is hard. If it were easy, everyone in the world would have the same religion.

    Like religion, the best you can do is explain the situation, point out major points and reasons, and then you've got to let them decide. And that's as far as you can go. Whenever I see a religious nut in the streets, I avoid them like the plague and don't even get the point on hearing their message, because I've been badgered too much in the past and have made my decision. Now nobody's opinion gets through.

    Everyone in my office writes in tables, capital letters for tags, and often without a doctype. If it doesn't puke in FF or IE, it's hard to convince anyone to do the work that goes into changing how you write.

    You can write semantic, seo-friendly etc table layouts... but the amount of work in that is work that could better go towards learning a new way to build pages anyway.

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Well Firefox, Opera, Safari, and IE8 all support CSS tables so once IE7 and earlier disappear there will be the opportunity to use CSS tables for layout and HTML tables for tabular data - which will give all the benefits of using tables without any of the disadvantages.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Firefox, Opera, Safari, and IE8 all support CSS tables
    Do you mean display: table? Yes, that would be so nice.

  15. #15
    SitePoint Member Tybe-O's Avatar
    Join Date
    Mar 2008
    Location
    NL, Rotterdam
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another pro for the css-approach is that different aspects of a webpage become more separated, html=structure, css=presentation, perhaps some javascript for behaviour. All filled with content from a backend.

    In larger projects it becomes much easier for different specialised people (or even companies) to work together without getting in each other's way.

  16. #16
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tybe-O View Post
    Another pro for the css-approach is that different aspects of a webpage become more separated, html=structure, css=presentation, perhaps some javascript for behaviour. All filled with content from a backend.

    In larger projects it becomes much easier for different specialised people (or even companies) to work together without getting in each other's way.
    This is a good thing for keeping things separate but by its very nature it makes it much more difficult for beginners to learn to code. The absence of presentational markup from the main document seems akin to painting a picture with your eyes closed. I'm saying this as a beginner myself, I'm not putting standards down, just saying it makes everything much more difficult to learn as it's completely separate. I have to constantly look at an HTML page, then style sheet, then try to keep the rule in my head along with the targeted element when I go back to the page by which time I've forgotten what I was looking for in the code anyway.

    Also, when I look at a template to learn it's separate, style and markup. The same problem occurs. It's ok being excellent to the end user and accessible markup is great and all but we have to look at exactly who we're making it accessible to imo. Making it inaccessible to learner coders must surely be as bad as making it inaccessible to end users mustn't it?

    At the moment pure CSS designs with external sheets are spot on for accessibility, screen readers, look nice and follow the rules, all of which is fine for end users only. Unless you're a CSS guru it's extra difficult to link the 2 documents visually when you're a beginner like me. This is an often overlooked point I think, in general I mean.

    EDIT - Just had an idea, it would be nice if tutorials included separate 'finished' files but included a copy of the finished document with every style applied inline somehow. This would help people like me to more closely associate the styles with the HTML rather than seeing separate sheets and losing the plot.

  17. #17
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @protheory, it sounds as if you haven't yet acquired some of the basic insights about HTML and CSS. I don't mean that disparagingly (you said yourself that you're a beginner).

    HTML has nothing to do with how the document looks. It only marks up what things are. If you use meaningful IDs and class names for the main divisions of the page, then an external CSS style sheet should be quite understandable even without seeing the markup.

    I personally find it helps to structure the CSS rules visually, by indenting subordinate elements like this,
    Code:
    #header {decl1; decl2; decl3}
    #wrapper {decl1; decl2}
      #content {decl1; decl2; decl3}
      #sidebar {decl1; decl2; decl3; decl4}
      #nav {decl1; decl2; decl3}
        #nav li {decl1; decl2}
    #footer {decl1; decl2}
    Birnam wood is come to Dunsinane

  18. #18
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by protheory View Post
    This is a good thing for keeping things separate but by its very nature it makes it much more difficult for beginners to learn to code. The absence of presentational markup from the main document seems akin to painting a picture with your eyes closed. I'm saying this as a beginner myself, I'm not putting standards down, just saying it makes everything much more difficult to learn as it's completely separate. I have to constantly look at an HTML page, then style sheet, then try to keep the rule in my head along with the targeted element when I go back to the page by which time I've forgotten what I was looking for in the code anyway.
    Have you tried Firefox plus Firebug? You can write and edit the CSS directly in the browser and see it's effects "live". Then, all you need to do is copy&paste it in your editor and save it.

    And with the All-in-One Sidebar you can put your tutorial in the sidebar to follow (okay, you'd probably need a wide screen to get this to work properly).
    Dan G
    Marketing Strategist & Consultant

  19. #19
    SitePoint Member Tybe-O's Avatar
    Join Date
    Mar 2008
    Location
    NL, Rotterdam
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by protheory View Post
    At the moment pure CSS designs with external sheets are spot on for accessibility, screen readers, look nice and follow the rules, all of which is fine for end users only. Unless you're a CSS guru it's extra difficult to link the 2 documents visually when you're a beginner like me. This is an often overlooked point I think, in general I mean.
    I sure see your point that with the growing complexity, things become more and more abstract and thereby the learning curve is steeper.

    But I don't agree in that it's automatically a point of consideration when choosing the techniques.
    At first, the creation of the page is a one-time affair (besides maintenance and upgrades) as opposed to visitors that will come for years. That justifies some extra effort.
    Second, as a webbuilder you create sites not for yourself but for the one who hires you and ultimately for the end user. And as a professional in this field work it's important to keep up with the ever-evolving techniques.

    Of course reality is never as beautiful as theory, so available know-how or systems that will limit choices are always there...

    To help the growing complexity, there are tools that will help, like the aforementioned firebug. I work a lot with Zend studio and not so much with Eclipse but I've seen the Eclipse editor present you a list of element-id's so that you can jump to the relevant part of your document. Looked good to me. Trying the evaluation version of TopStyle is also recommended as that focusses on HTML/CSS editing....

  20. #20
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    @protheory, it sounds as if you haven't yet acquired some of the basic insights about HTML and CSS. I don't mean that disparagingly (you said yourself that you're a beginner).

    HTML has nothing to do with how the document looks. It only marks up what things are. If you use meaningful IDs and class names for the main divisions of the page, then an external CSS style sheet should be quite understandable even without seeing the markup.

    I personally find it helps to structure the CSS rules visually, by indenting subordinate elements like this,
    Code:
    #header {decl1; decl2; decl3}
    #wrapper {decl1; decl2}
      #content {decl1; decl2; decl3}
      #sidebar {decl1; decl2; decl3; decl4}
      #nav {decl1; decl2; decl3}
        #nav li {decl1; decl2}
    #footer {decl1; decl2}
    Hello, I know it sounds like I don't know what I'm talking about but I do actually. I just find it extremely difficult to edit premade CSS layouts. I've been working on one after I posted this, I deleted a column, deleted the CSS rules, and now I can't for the life of me work out how to make the remaining column align centre on my page. I've read and read but I still find it extremely difficult to understand. I know it's up to me to learn through asking for help and endless practice but it's just so difficult.

  21. #21
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Maybe it's a good thing to look at a website and see/imagine how it would look if it were a paper document with just text. If my sites don't look like a nice college paper when I turn images and CSS off, I might be doing something wrong.

    If you can imagine a site as a paper, you can just write the basic HTML first. After the basics are finished, you start making a CSS sheet, open the file in a browser, and start your changes from top to bottom. At some point you'll find you need to add a class here or there, or make some other change so CSS has something to latch onto, but you just do it one change at a time when you're starting out, look in the browsers, make another change, look in the browsers... you can see your page slowly changing into the image you were given (or you created) for what the final product will look or act like. All the while, turning CSS and images off still gets you that nice clean school paper.

    It is hard at first to look at a page and figure out what's doing what to who... I sure couldn't do it at first and I still miss stuff easily, but eventually you'll get to a point where you can look at code alone and get an idea of how the basic layout of the page is. That said, templates themselves are extremely difficult, even the "good" ones. Don't feel bad if you can't figure a template out. They're often monstrosities of code.

    Most of us building web pages are visual people... I sometimes wonder why someone doesn't make some little animated video showing stuff working as it's added in... now that would be extremely valuable!

  22. #22
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by c2uk View Post
    Have you tried Firefox plus Firebug? You can write and edit the CSS directly in the browser and see it's effects "live". Then, all you need to do is copy&paste it in your editor and save it.

    And with the All-in-One Sidebar you can put your tutorial in the sidebar to follow (okay, you'd probably need a wide screen to get this to work properly).
    I've got Web Developer Toolbar which helps me a lot actually but I've not tried Firebug yet, I honestly thought it was the same thing as the Developer toolbar. This sounds like what I'm looking for though I think, I'm on a 1280x1024 resolution so I should be able to have a few windows up, thanks

  23. #23
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I've seen Firebug once, and it opens a window at the bottom of the browser window I think.

  24. #24
    SitePoint Enthusiast protheory's Avatar
    Join Date
    Mar 2008
    Location
    Notts, England
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Maybe it's a good thing to look at a website and see/imagine how it would look if it were a paper document with just text. If my sites don't look like a nice college paper when I turn images and CSS off, I might be doing something wrong.

    If you can imagine a site as a paper, you can just write the basic HTML first. After the basics are finished, you start making a CSS sheet, open the file in a browser, and start your changes from top to bottom. At some point you'll find you need to add a class here or there, or make some other change so CSS has something to latch onto, but you just do it one change at a time when you're starting out, look in the browsers, make another change, look in the browsers... you can see your page slowly changing into the image you were given (or you created) for what the final product will look or act like. All the while, turning CSS and images off still gets you that nice clean school paper.

    It is hard at first to look at a page and figure out what's doing what to who... I sure couldn't do it at first and I still miss stuff easily, but eventually you'll get to a point where you can look at code alone and get an idea of how the basic layout of the page is. That said, templates themselves are extremely difficult, even the "good" ones. Don't feel bad if you can't figure a template out. They're often monstrosities of code.
    This is good advice, and thanks for the encouragement regarding templates, I'm dedicated to learning and I categorically don't use tables for layout. I just find CSS-P very difficult to learn on my own from books and articles. I'm not giving up, just getting frustrated I guess lol.

  25. #25
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    What have you used so far? I got my first real leg up (with HTML and CSS together mostly) with Ian Lloyd's book (Build Your Own Web Site the Right Way Using HTML and CSS), and then got a better handle on basic (very basic) CSS for layouts with Dan Shafer/Rachael Andrew's book (HTML Utopia: Designing Without Tables Using CSS). I have the CSS Anthology but after reading the first two books and being on these forums (I'm on like 3 or 4 forums and they each have their own group of gurus and hooded/cloaked Crusties), it didn't have anything new (and the bits that were not so familiar, I had found more info through articles like the one on A List Apart about CSS sprites, Sliding Doors, or Print css sheets).

    Those books are really really great for the basics, with maybe the biggest "problem" being that they can't possibly go through all the bugs. I've been to bug pages, and have a gazillion Bookmarks (and I use at least half of them every day!), but usually I'm learning something new from Paul or some other guru anyway, and generally I only learn as I go with a particular thing (my first real big project after learning basic layouts was forms, forms, forms, forms... I did so many forms I had forms coming out of my ears, and forms aren't really easy but after making 50 of them and they all need to work from ONE css sheet but they all look and act different, you really get them down pat!) and you post your code here and say, this is what I've got, and browser X isn't playing ball, what am I doing wrong, or if this is a bug how do I get around it?

    It's slow, but goes a lot faster if you've got some sort of good basis underneath, rather than starting out flailing about and trying to learn by looking at how other sites are built... they're often either not built well, or are more complicated than needed to do the job... and templates are the worst!!! I can get lost in a template. The way CSS is written seems to be for maximum flexibility, meaning it's bloated and they group things in these chunks that makes it extremely difficult to tell how one thing reacts with another.

    I write my CSS sheets from top of the HTML to the bottom, which I think makes more sense than grouping all my links in one place, all the header tags in another, and the layout boxes in yet another...


Bookmarks

Posting Permissions

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