Question about those evil table layouts

[mkriegs]

(question in a nutshell at bottom \/)

site in question here: http://www.theannosmith.com (completely hand coded :p)

Seems everywhere I look people say that tables should be COMPLETELY eradicated (with the exception of displaying tabular data) and that it should be completely replaced with CSS, no exceptions. Now, that doesn't really sit well with me

Okay, so I've seen some pretty bad layouts using tables, namely a table-inside-a-table-inside-a-table-inside-a-table as well as using tables for menus where the borders are each their own cells. But what about finding a happy medium between CSS and tables? Right now on my site I have the "skeleton" of my layout made with one table with 6 cells - one for the logo in the upper left, then the header, the menu, the sidebar, the body, and the footer. Then the padding and styling and all that is done with a CSS sheet.

I'd say I'm reasonably familiar with CSS, but whenever I try to remake my layout purely with <DIV> tags and a CSS sheet I can NEVER get exactly what I want, I almost always have to compromise. Also, there's the whole thing that CSS allegedly lowers filesize, but whenever I attempt to remake my layout using CSS my filesize either stays the same or actually goes up (if you include the CSS with the filesize).

Plus, I use a CMS that I hand coded specifically for my website so there's really no worries about organizing the content. Even though I don't notice any significant gain in organization between what I have now and what a CSS layout looks like.



Question in a nutshell: I don't see any reason at all to completely remake my layout using DIV tags and a CSS sheet, If you take a look at my website with firebug you can see I only use 6 cells in 1 table and align them using rowspan and colspan. Is it really worth it to go through the headache to completely redo my layout just so the W3C thinks I'm a cool guy?

[Early Out]

I agree. The "no tables" movement is sometimes as blind as religious fundamentalism. There are some things that tables do much better than anything else, and there's nothing wrong with using the best tool for the job.

This is especially true given some of the things that are sorely lacking in CSS. Doing something apparently simple, like centering a group of thumbnails within a viewport, but still allowing them to wrap to accommodate a narrower viewport, is dam n near impossible without using tables.

[felgall]

A lot of people are getting confused over various aspects of this. The goal should be to use the most semantically correct tags around the various parts of your page content.

One of the biggest reasons why using non-semantic tags of any sort is wrong is because there are a number of different ways people can access web pages. ot everyone views the web page on a computer screen. By separating up the content in the HTML and the appearance in CSS you can set up different CSS for the different media so as to use an appropriate appearacnce for different device types.

Using HTML tables for layout often means that the content is totally jumbled into a meaninless order when being read out by a web reader.

There is a way to set up table like structures using CSS that can be properly targetted to the appropriate media that will allow you to set up web pages that use the table-like structures where you need them while still using the semantically correct tags in the HTML but unfortunately there are two popular browsers that do not support that part of the CSS 2.1 standard and so using that way of setting out the page means that you need to do something different for those who still haven't upgraded from those two browsers (IE6 and IE7). Once the usage of those two browsers drops low enough it will be possible to use display:table, display:table-row, and display:table-cell in your CSS to do table layouts targetted to specific media while still using semantic tags in your HTML. I guess how soon this becomes practical will depend on how quickly those still using IE rather than more standard compliant browsers upgrade to IE8.

[mkriegs]

I agree. The "no tables" movement is sometimes as blind as religious fundamentalism. There are some things that tables do much better than anything else, and there's nothing wrong with using the best tool for the job.

This is especially true given some of the things that are sorely lacking in CSS. Doing something apparently simple, like centering a group of thumbnails within a viewport, but still allowing them to wrap to accommodate a narrower viewport, is dam n near impossible without using tables.

Excellent, so I'm not the only one :p. And yes, I definitely agree that CSS could be a LOT better. It's definitely an excellent idea and in most cases it fills a niche that previously has no good alternative (that I know of), but I just don't see layout being one of those cases.


A lot of people are getting confused over various aspects of this. The goal should be to use the most semantically correct tags around the various parts of your page content.

One of the biggest reasons why using non-semantic tags of any sort is wrong is because there are a number of different ways people can access web pages. ot everyone views the web page on a computer screen. By separating up the content in the HTML and the appearance in CSS you can set up different CSS for the different media so as to use an appropriate appearacnce for different device types.

Using HTML tables for layout often means that the content is totally jumbled into a meaninless order when being read out by a web reader.

There is a way to set up table like structures using CSS that can be properly targetted to the appropriate media that will allow you to set up web pages that use the table-like structures where you need them while still using the semantically correct tags in the HTML but unfortunately there are two popular browsers that do not support that part of the CSS 2.1 standard and so using that way of setting out the page means that you need to do something different for those who still haven't upgraded from those two browsers (IE6 and IE7). Once the usage of those two browsers drops low enough it will be possible to use display:table, display:table-row, and display:table-cell in your CSS to do table layouts targetted to specific media while still using semantic tags in your HTML. I guess how soon this becomes practical will depend on how quickly those still using IE rather than more standard compliant browsers upgrade to IE8.

I see what you're saying, but with my website being a small business website there's not really a high enough of a demand for it to be displayed on devices other than computers. Until there's some significant improvements, I'll most likely just keep using CSS as what it's name suggest, STYLEsheets, not layoutsheets.

^Idea: could that be possible? CLS, a version of CSS specifically FOR layout? Because face it; in the beginning CSS wasn't meant for layout at all, and neither were tables. Both methods are essentially workarounds in my eyes, I just think that tables is a more stable and efficient workaround when used properly.

Which brings me to this question: Is something like that currently available? A language specifically designed to handle modern layouts.

[redsox9]

If you know the target audience that your site will see and you understand their capabilities, then it is easier to design a site based on that knowledge. However, most people do not have that luxury and, especially for small businesses, using web-standard code makes it less likely that you will drive away potential customers.

My sites used tables extensively until a few years ago when I began using PHP scripts to make my sites more manageable. At that point, I found that different browsers displayed my dynamic site content differently with traditional table tags. Making the switch, as painful as it was, has made it such that, regardless of which browser the end user chooses, my site displays as I intended.

I will agree, however, that I found tables much simpler and straightforward. :)


Idea: could that be possible? CLS, a version of CSS specifically FOR layout? Because face it; in the beginning CSS wasn't meant for layout at all, and neither were tables. Both methods are essentially workarounds in my eyes, I just think that tables is a more stable and efficient workaround when used properly.

Which brings me to this question: Is something like that currently available? A language specifically designed to handle modern layouts.

Boy, if there is, I'd like to know, too!

[Believer]

Try BlueprintCSS or even just Yahoo YUI Grids. I use both, there are subtle differences in that Yahoo YUI grids are percentage based whereas BlueprintCSS is pixel based. Try em both and see what you prefer, and there are others as well.

http://blueprintcss.org/
http://developer.yahoo.com/yui/
http://developer.yahoo.com/yui/grids/
http://developer.yahoo.com/yui/grids/builder/

[felgall]

Boy, if there is, I'd like to know, too!

That's what the display:table, display:table-row and display:table-cell commands were added to CSS 2.1 for. They allow table type positioning to be performed from CSS regardless of what tags are used in the HTML. That allows you to use CSS table tayouts that are targetted to those media where you want that type of layout while still allowing a more meaningful layout for web readers etc.

The commands are supported by all popular versions of Firefox, Opera, Safari, Chrome, and IE8 so as soon as people stop using earlier versions of IE doing your table layouts from the CSS will be the better way of achieving those results.


I see what you're saying, but with my website being a small business website there's not really a high enough of a demand for it to be displayed on devices other than computers.

A lot of people switch devices from computer to handheld and back to computer as they access the web while travelling between home and work so a growing percentage of people accessing sites with computers also use other devices at other times.


Which brings me to this question: Is something like that currently available? A language specifically designed to handle modern layouts.

As for CSS not being designed to do positioning - that was true of CSS1 which is why a separate CSS-P standard was developed for positioning. CSS 2.0, 2.1, and 3.0 have all included standards specifically for positioning. So the language you are looking for does exist and is called CSS. From CSS 2.1 onward CSS even includes the commands for doing table layouts from the CSS. All popular browsers support those commands apart from IE7 and earlier.