Using TABLE for layout

I think designers and developers alike are realizing using HTML TABLE for some layout is a smart thing to do after all. Some wise usage of TABLE based layout is popping up everywhere recently including Google Apps. Below is a Firebug screen capture of parts of Google Calendar where it uses TABLE for layout.

I totally agree. The “no TABLE no matter what the cost” approach is a silly fad and a movement advocated by early css developers who were overly enthusiastic with their fascination with the new-found technique. I see where they’re coming from , too. If you were coming from the early days of web development with sketchy browser css support, using tables to workaround layout issues can get pretty messy and a maintenance nightmare. So a proper browser support of CSS was indeed a breath of fresh air and freedom. But shunning TABLE no matter what the cost subjects yourself to complicated rows of DIVs and floats which in essence works against the simple and maintainable approach. Using TABLE for layout makes sense if used properly. Although not captured in the example, content inside the table is organized nicely using <div>and lists <li>. Organizing content this way yields to much more predictable behavior across platform and browsers.

I would not recommend this TABLE + CSS hybrid method for blogs or any sites that are at the mercy of search engines or readers. But for applications or widgets it makes perfect sense and will make your life as a UI designer/developer a whole lot easier. As with any tool, you just have to be smart about when, where and how much to use.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.