SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Table CSS instead for the layout

    Hi hope everything is well. Is anyone else using CSS tables properties to replicate a table without using tables in the code, is their a more educated choice here??? Seems to work in all browsers, and allows more customization. I was motivated when I picked up a old Eric Meyer's book that used tables, I wanted to re-create the site but did not want tables in my layout.



    Here is the page

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    You can certainly do that, and there is a SitePoint book all about this subject (cheekily titled Everything You Know about CSS is Wrong), but it's not really necessary. Its limitation is that you don't get as much flexibility in how your organize your HTML. And be aware that it doesn't work in older browsers like IE7 and under (though that doesn't matter these days to most people, as fewer than 1% of people use them now).

  3. #3
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So a more flexible option might be going with floats or absolute posistioning?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Floats, yes, but not absolute positioning ... that's the worst option of them all, because it's very inflexible. There are quite a few methods for laying out three column sites, some of them very sophisticated. You could have a look at Paul O'Brien's site, as it has a lot of examples:

    http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

  5. #5
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when you say "flexable" you mean a website that grows with new content? For example somthing like a page with a content managent system?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by polyhedra View Post
    when you say "flexable" you mean a website that grows with new content? For example somthing like a page with a content managent system?
    Grows with new content, yes, and also reflows depending on the width of the screen. This isn't really related to a CMS, though, which is more of a "back end" concern. We are just talking about front end design here, which just involves HTML and CSS in this context.

  7. #7
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS tables are, as far as I know, the only reliable method for creating two columns that take up 100% of the available space, one fixed width and the other fluid width.

    I use them sometimes. There's nothing semantically wrong with them---not sure why people don't get that. For more traditional grid-based layouts (all fixed or all fluid) I like to use floats still. Sometimes I use inline-blocks if I can get rid of the whitespace without much trouble...it all depends on the task at hand.

    Floats are great once you learn how they work and how to clear them properly.

    Here's one of my favorite CSS Tricks articles: http://css-tricks.com/dont-overthink-it-grids/

    It explains how to make a simple, flexible, and reliable grid-based layout (i.e. pretty much any layout) using floats and border-box sizing. This and CSS tables are gonna be the two best ways to do it until we can start using flexbox.

  8. #8
    SitePoint Enthusiast polyhedra's Avatar
    Join Date
    Nov 2011
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After looking into flexbox, the idea looks pretty good.And since using CSS to design a layout is probably, in my opinion, the hardest part, flexbox what we all want right? Still, tables can be left out for layout nowbecause you can just take some time and find some CSS code that will do the same, or learn javascript and paste that in. Anyways, here is my favorite link on layout http://www.alistapart.com/articles/fauxcolumns/

  9. #9
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS tables are completely different from HTML tables, though. You're just telling HTML elements like divs, sections, articles, etc. to BEHAVE like tables, so in my opinion, CSS tables are the best choice for fluid-width multi-column layouts. At least they are if you only care about supporting IE8 and higher (IE6 and 7 aren't relevant anymore...finally)

    But yeah, flexboxes are a godsend. Using floats for layouts has always been a hack that abuses the purpose of floats---and flexbox fixes that at last.

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Spritanium View Post
    CSS tables are, as far as I know, the only reliable method for creating two columns that take up 100% of the available space, one fixed width and the other fluid width.
    Another option is to float the fixed width column beside a flexible width column with a margin slightly wider than the fixed width column.

    There's nothing semantically wrong with them---not sure why people don't get that.
    One limitation with CSS table layouts is that they are a bit inflexible, making it hard for things to be repositioned at different screen sized—unless you totally rewrite the CSS for various conditions, which is a bit of a pain.

    Using floats for layouts has always been a hack that abuses the purpose of floats
    Not necessarily. Paul O'B points out that the earliest CSS specs, and their examples, covered using floats for column layouts, so it was always in the minds of the CSS creators.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Not necessarily. Paul O'B points out that the earliest CSS specs, and their examples, covered using floats for column layouts, so it was always in the minds of the CSS creators.
    In this old thread from 4 years ago I point to a link from the w3c some 10 years earlier than that that shows some intended uses of floats and one was for columnar layouts. Unfortunately the link the the test suite has now died (it must be 15 years old now) but as seen from the reply after my post it was conclusive that floats for layout were never a hack but just another tool in the toolbox.


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
  •