<table> vs <div> (yet again)

Question

I generally agree with the idea that web site layouts should be done with <div>s instead of <table>s. However, I have a situation where this does not work - or at least, I have not found any solution.

I have a dynamic site where many customers share the same template (they can pick one from a set of available templates). A template defines the general layout of the site - typically header at the top, two or three columns (menu on the left, primary content in the middle, and sometimes additional content on the right), and footer at the bottom - nothing fancy. The customers have complete control over the contents of the header and the right side content, and significant control over the contents of the menu and main content areas.

The point here is that I do not know what the width of any of the columns will be. The customer may have long or short text for each menu item, they may put small or large images in the right-side column, and the main content can be a free-for-all. I cannot impose too many design restrictions on my customers - they have their own ideas on what the site should look like (some of them get uglier than a MySpace page). There is a 'preferred' width for the site (the main <table> width property) so that when the content is reasonable, the site maintains a nice appearance.

A table based layout just handles this - whatever sizes the columns turn out to be, the table adjusts to fit. <div>s however, do not. If the menu gets a little wider, the other columns drop down below it. If some content is too wide for its container <div>, it extends past the border and interferes with whatever is next to it.

I have played with using javascript to adjust column widths, but this causes flashing of the layout, where a <table> just renders it without any fuss. I know about the various table-related options for the css display property, but since they are not supported widely enough (naughty IE) I can't use them. (And as a snotty aside, the argument that <table>s were never intended to be used for layout, so instead we should use <div>s - and then tell them to behave like <table>s - sounds funny to me.)

So, while I would like to switch to <div>-based layouts for all the usual reasons, I don't believe I can for these templates (or, at least, not until everyone upgrades to IE 10). I am hoping the SO gang can help me find a way to do this.

Answer 1

You can have a look at this article: Multi-Column layouts but I tend to generally agree. Depending on the nature of the layout of the site, it can be tricky to the point of impractical to use divs for the layout. It's simply a case of some browsers not being where we need them to be to always do that.

Answer 2

You could make an argument that in your case, the layout essentially is a table after all. Often, the point in <div>'s is that the precise layout doesn't matter that much. It has to be adaptable. If the screen size changes so that your original layout isn't possible, the browser tries to shuffle the elements around to get something that still works. That's one reason why <div>'s are usually preferred.

In your case, you want to give that control to the user. And then it is effectively a table, where they get to choose the dimensions and contents of every cell. The fact that it ends up looking like a webpage is almost coincidental.

You're not designing a web page. If you were, you should (and could) use <div>'s. You're creating a table, which your users can fill in with the content they like.

I'm sure some purists will disagree with this answer, but ultimately, the rule is not "never use <table>, but simply "never use <table> for layout". And you're not using it for layout. You're using it to provide a fixed structure for your users to fill data into.

Answer 3

Working with DIVs sometimes takes huge effort, when trying to tell a complex designs to behave exactly as the designer (or a control freak client) wants.

When ever possible, I use tables instead of divs, this gives me the peace of mind when working on a tightly scheduled project when messing around with different browsers.

ALternatively, when I got the time, I use DIVS as an elegant way of doing things right. just for the fun of it.

Answer 4

Some would argue that you can get the same (or close enough) level of certainty with and and an assortment of CSS magic. It just takes a different mindset. For those of us who "grew up" with tables, its different and requires some re-learning. Which we need to do as this is not the same web it once was.

Having said that, I do think that tables have gotten a bit of a bad rap, and I suspect it has a lot to with the newcomers who "grew up" on the developer reaction to table-based design - but without the history, and deeper knowledge of web design, they tend more towards the vapid rants that seem to proliferate and lean on each other. But that's another rant for another day.

I'm going to suggest that this question get closed as its not a question for SO.