I can just about hear the astonished gasps: someone still uses HTML tables to style their pages? In this day and age of aligning everything on a webpage with CSS-styled divs?!

Some webdesigners might react not with shock, but with scorn: “Pah, only newbs and amateurs style pages with TABLES. REAL designers use only CSS for layouts.” (Don’t think webdesigners say that stuff to each other? I have been part of several design discussions where such negative terms were bandied about–very discouraging!) But after 10 years of self-taught designing, I still rely on tables for a few styles of page layouts, including the one below.

The three-column design demonstrated above (which will be part of a future layout on my main domain, withinmyworld.org) is one of the many reasons I keep tables in my layout toolbox.

Why? Because try as I might, I have never been able to get a three-column pure-CSS layout to align like this–to have the correct, even spacing between content blocks, or to just LOOK like a cohesive whole. I’ve tried a few solutions–for instance, floating a few sets of nested divs (as in, two sets of “float: left” and “float: right,” one set for two of the columns, and the second set floating the first set and the third column).

But this solution always seems too clunky, and never looks just “right” on the page, either–usually, one column ends up too far away from the others, or the content boxes are unevenly spaced apart no matter how I try to shore up the padding and margins. Plus, if the page width shrinks too much, one or two of the columns always ends up dropping down below the others–definitely not what I want, either.

So, in lieu of CSS, this is how I achieved the above look:

• Table tag: <table border=”0″ cellpadding=”14″ cellspacing=”14″ width=”790″>
• Each table cell: <tr><td valign=”top”></td>
• CSS styling:
  table {font-size: 11px;}
  .tablecell {background-color: #8fd6ff;}

This is much simpler coding (a plus for someone who is self-taught, like me), plus it’s less for the browser to load. Lastly, it gives me the look I want: clean, evenly-spaced blocks of content, with a slightly darker color in between the blocks to visually separate the content even further.

If It Ain’t Broke, Don’t Fix It!

I’m a big believer in the above sentiment when it comes to webdesign. If the coding still works in all modern browsers (and hasn’t been labeled as “deprecated” by the W3C), why not use it, if it is the only tool which works precisely as we need it to work?

I admit, I’d like to find a way to make this layout work the exact same way in CSS. But unless I’m just going about it all the wrong way, I haven’t found something to match the HTML table for sheer cleanliness, ease, and even spacing on a layout with more than two columns. And I don’t think that’s a bad thing. After all, visitors to our sites are not going to know (or care) whether we used tables or divs to make our layouts–they just want a site that works and is easy to browse!

I’m not suggesting that webdesigners quit trying new coding styles entirely; I am, however, suggesting that having multiple ways to code a page can be to our benefit. And, if the only tool that works is an “older” style (such as an HTML table), it shouldn’t be a point of scorn between designers. We’re all on the same side, anyway–we’re all in the business of putting together great pages for others to view!

(PS: If you know a way to make a pure-CSS three-column layout like the one I’ve pictured above, let me know in the comments! It’d be great to augment the good ol’ HTML table with a few more dabs of CSS.)