Yes, I Still Use HTML Tables for Layouts!

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.

table_example
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.)

2 thoughts on “Yes, I Still Use HTML Tables for Layouts!”

  1. Using Tables for layouts does often make more sense than the purists who believe HTML/CSS3 Div are the solution to everything like to admit. Your example above is probably not the best to justify the use of tables, especially not if you use bootstrap.

    I am using table for complicated Form layouts or creation of widgets where I use tables with col/row span to combine groups of cells. Using divs with fluid designs for the same is practically impossible and the resulting code far more complex than what can be achieved with tables.

    In addition, tables don’t necessarily render more slowly that dozens of nested divs with even more styles attached to it. With tables for fixed layouts code is also often easier to read and maintain/debug. (Add a border to the table and voila you know whats going on… try this with 50 divs). In addition, I don’t really care about search engines when it comes to some widgets or forms where I sue tables.

    The bottom line… with tables we just have more control over positioning as CSS simply does not yet provide the appropriate styling tools.
    Even Grid Systems often don’t offer a solution. I am happy to change to Flexbox or some Grid Systems in the future but till then I’ll take the practical view that if Tables offer a better, easier and more consistent way to layout some design elements like widgets or forms I will happily use them.

  2. Thank you for your reply, Dan! This article came out before Bootstrap really hit widespread popular usage, so it needs an update to account for content frameworks. But I also agree that tables still have an application on modern websites even with content frameworks in place!

Leave a Reply

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