CSS
Using Tables for Layout
Monday, September 8th, 2008 | Web Design | No Comments
On the internet of yesteryear, it was the norm for websites to have the layout done with tables, but with the dawn of CSS, the rules changed somewhat. A lot of people now consider tables to be completely taboo unless used for tabular data – after all, that’s what they’re supposed to be for right? The truth is that although using tables to layout a page is bad form in general, there are times when sections of a page can really benefit from this approach.
Consider the case where we have our main structural elements in place already. We have a container DIV tag enclosing our site, then a header DIV, a navigation bar DIV, a content DIV and footer DIV, and we have everything nicely laid out with some fancy CSS and absolute positioning. What do we do then, if we have sectioned content needing to be nicely arranged within the content DIV? Do we go on nesting DIVs for each individual content area until our page becomes a “divitis” nightmare? A better approach is to simply create a table within the content DIV that can help with arranging our sections. This way we have no nested DIVs and no nested TABLE tags either. The end result is cleaner code that is easier to maintain, good cross-browser support with minimal CSS hacks, and pixel-perfect control over the placement of our content.
Just remember, although tables should be used sparingly, that doesn’t mean they should be dropped from your web design toolbox without a second thought. Being a good designer is about more than just obeying some arbitrary rules; you must use your head and know why the rules exist and when to break them. Letting a design suffer because you can’t figure out the complex CSS to make it work is just madness. If you come across a design problem that is screaming out for a table then use one.