SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member Xizor's Avatar
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Table-Based layouts

    Hi guys,
    I was wondering if css table based layouts are the way to layout webpages now? Or is floats relative/absoulte postion still the way to go? Any popular websites use table based layouts?

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    CSS tables are not supported by IE7 and earlier so if you are going to define tables in your CSS the pages will look completely different in those earlier IE versions that people still use.
    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="^$">

  3. #3
    SitePoint Member Xizor's Avatar
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

  4. #4
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    The popular thing these days are completely CSS based layouts. There are great grid systems to help out with this as well like 960.gs and the Skeleton Grid. Table based layouts are a thing of the past. A nice collection of CSS based layouts here if your interested: 35 CSS-based Layouts that Look Awesome | Nettuts+

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Xizor View Post
    Or is floats relative/absoulte postion still the way to go? Any popular websites use table based layouts?
    Floating is the most common way now. Try to avoid absolute positioning for page layout.

    There is a SitePoint book that goes into detail about table-based layouts:

    Everything*You*Know About CSS*Is*Wrong! - SitePoint Books

    Probably the reason why this method hasn't taken off bigtime is because of the IE7 and under lack of support.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  6. #6
    SitePoint Member Xizor's Avatar
    Join Date
    Jul 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Floating is the most common way now. Try to avoid absolute positioning for page layout.

    There is a SitePoint book that goes into detail about table-based layouts:

    Everything*You*Know About CSS*Is*Wrong! - SitePoint Books

    Probably the reason why this method hasn't taken off bigtime is because of the IE7 and under lack of support.
    Yea I have that book, but I have not studied it yet and before i getting into it I wanted to make sure that it was something I could use with out to much fuss. Table-Based layouts in css seem more straight forward and easier to understand but i don't want to have to do table base layouts and then still have to use other techniques later. I have been off and on with studying web design but so far I have not found a good book that deals with layout completely like
    Everything You Know About CSS Is Wrong!
    Any suggestion?

  7. #7
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    I have read that book as well a long time back. Like some people stated through olde browsers do not support those properties, mainly IE7 which is a big market share. So in regards to practicality you would have to essentially write the same thing twice, which makes no sense. You might as well avoid table based properties entirely imo. table based properties are adding more work with no return, its really just stupid from an efficiency stand point.
    The only code I hate more than my own is everyone else's.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Xizor View Post
    I have been off and on with studying web design but so far I have not found a good book that deals with layout completely
    There are lots of CSS books that cover layout in detail. One I liked was Stylin' with CSS, by Wykie-Smith, but there are lots of others—even here at SitePoint—that are good too.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by felgall View Post
    CSS tables are not supported by IE7 and earlier so if you are going to define tables in your CSS the pages will look completely different in those earlier IE versions that people still use.
    Of course, that isn't necessarily a problem. If you can make an acceptable design that works in IE6/7 (targeted by conditional comments), even if it isn't as good as the fully fledged version that you serve to 21st century browsers, that can be fine. Very few visitors to a site will check how it looks in different browsers, so the fact that it looks different in IE7 to more modern counterparts will rarely be a problem.

    Quote Originally Posted by TheRaptor View Post
    The popular thing these days are completely CSS based layouts. There are great grid systems to help out with this as well like 960.gs and the Skeleton Grid. Table based layouts are a thing of the past.
    The problem with using off-the-shelf grid layouts is that they usually involve massive code bloat, which makes your pages slow to download and sluggish to use. And then, when anything doesn't work quite right, you'll struggle to find what needs to be changed, because it's all someone else's code that you don't understand.

  10. #10
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    The problem with using off-the-shelf grid layouts is that they usually involve massive code bloat, which makes your pages slow to download and sluggish to use. And then, when anything doesn't work quite right, you'll struggle to find what needs to be changed, because it's all someone else's code that you don't understand.
    Actually the normal 960 grid system minified css file is only 5.772k and the 12 column version is just a hair under 3k (when I was using it I dumped it in the bottom of my default style.css so I didn't have to load a second css file). And for a beginner it can offer a great starting point for their design. But I understand what your saying and thats the reason I created my own grid system so when I need something I know exactly where it is.

  11. #11
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,882
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    Actually the normal 960 grid system minified css file is only 5.772k and the 12 column version is just a hair under 3k (when I was using it I dumped it in the bottom of my default style.css so I didn't have to load a second css file).
    On the other hand, have you looked at how bloated the markup becomes when it seems like almost every element has three or four classes attached to it, each of them usually several words long...

  12. #12
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    On the other hand, have you looked at how bloated the markup becomes when it seems like almost every element has three or four classes attached to it, each of them usually several words long...
    True, but creating css layouts will usually require a few classes on each element anyways. And it is possible to modify the classes so they aren't as long, thus preventing this code bloat if wanted/needed.

  13. #13
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    CSS frameworks are just bunch of hog wash targeted at idiots. Similar to SEO…
    The only code I hate more than my own is everyone else's.


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
  •