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?
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.
Thanks.
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+
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?
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.
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.
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.
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.
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.
CSS frameworks are just bunch of hog wash targeted at idiots. Similar to SEO…