Andrew Gregory

Layout tables are nice

Sunday, 9. March 2008, 15:45:58

More anti-table zealotry!

Sure, I've seen stacks of sites that over-use tables for layout, but seriously, the existing CSS methods for emulating table layouts without tables are all ridiculously complex, fragile, and error-prone. The amount of hoops you have to jump through to produce a common three-column equal-height layout with header and footer without tables is just stupid. And all you need to do to make it fall apart is look at it the wrong way!

Let's face it - until there is broad support for the proper way to do table layouts (i.e. CSS display:table-* properties - I'm look at you, MSIE!), by far the simplest and most robust way to do a table layout is to use a table. CSS may technically be up to it, but browser CSS support is not.

Here's a case in point. I recently evaluated CMSimple for whipping up a quick and easy to use website. This is a slightly abridged version of the default page template:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head><?php echo head();?></head>
  <body bgcolor="#808080" <?php echo onload();?>>
    <a id="TOP" name="TOP"></a>
    <table align="center" width="750" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td valign="top" colspan="2">
          <table align="center" width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="black" style="background-image: url(<?php echo $pth['folder']['templateimages']?>top.jpg);">
            <tr>
              <td valign="bottom" class="sitename" height="80">
                <font color="white"><?php echo sitename();?></font>
              </td>
              <td valign="top" align="right">
                <table align="center" width="100%" border="0" cellpadding="10" cellspacing="0">
                  <tr>
                    <td valign="top" align="right" class="searchbox"><?php echo searchbox();?></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td valign="top" width="200" bgcolor="#c0c0c0">
          <table align="center" width="100%" border="0" cellpadding="5" cellspacing="0">
            <tr>
              <td valign="top"><?php echo toc();?></td>
            </tr>
            <tr>
              <td valign="top" class="menu"><?php echo sitemaplink();?></td>
            </tr>
            <tr>
              <td valign="top" class="menu"><?php echo lastupdate();?></td>
            </tr>
          </table>
        </td>
        <td valign="top" width="550" bgcolor="white">
          <table align="center" width="100%" border="0" cellpadding="5" cellspacing="0">
            <tr>
              <td valign="top" class="locator" bgcolor="#808080"><?php echo locator();?></td>
            </tr>
            <tr>
              <td valign="top">
              <?php echo editmenu();?><?php echo content();?><?php echo submenu();?>
                <p>
                   
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td bgcolor="#808080" align="center" class="navigator">
          <!-- YOU ARE NOT ALLOWED TO REMOVE OR HIDE THIS LINK WITHOUT A COMMERCIAL LICENCE-->
          <a href="http://www.cmsimple.dk/" class="navigator">Powered by CMSimple</a>
          <!-- IF REMOVE OR HIDE: Then you must pay for a licence - see http://www.cmsimple.dk/?Licence -->
        </td>
        <td bgcolor="black" valign="top">
          <table width="100%" border="0" cellpadding="5" cellspacing="0">
            <tr>
              <td width="33%" class="navigator" valign="top"><?php echo previouspage();?></td>
              <td align="center" width="33%" class="navigator" valign="top"><?php echo top();?></td>
              <td align="right" width="33%" class="navigator" valign="top"><?php echo nextpage();?></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

Yep - far too many nested tables. It's also a fixed width and proved very stubborn trying to make it into a flexible-width layout. In fact, with all the tables in there, I gave up. I pulled it apart and re-built it from scratch:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php echo head();?>
</head>
<body <?php echo onload();?>>
<div id="TOP"></div>
<div id="header">
<span class="sitename"><?php echo sitename(); ?></span>
<?php echo searchbox(); ?>
</div>
<table id="body" class="layout">
<tr><td id="nav">
<?php echo toc(); ?>
<div id="sitemaplink"><?php echo sitemaplink(); ?></div>
<div id="lastupdate"><?php echo lastupdate(); ?></div>
</td><td id="content">
<div id="locator"><?php echo locator(); ?></div>
<?php echo editmenu(); ?>
<?php echo content(); ?>
</td></tr>
</table>
<div id="copyright">
<!-- YOU ARE NOT ALLOWED TO REMOVE OR HIDE THIS LINK WITHOUT A COMMERCIAL LICENCE -->
<a href="http://www.cmsimple.dk/" class="copyright">Powered by CMSimple</a>
<!-- IF REMOVE OR HIDE: Then you must pay for a licence - see http://www.cmsimple.dk/?Licence -->
</div>
</body>
</html>

Much, much more simple! The effort put into the single layout table probably amounted to a minute or two. I know I would have spent hours trying to achieve the same thing without tables. I could have done it, I have no doubt, but it's just not worth the time.

It's all about the right tool for the job. If the right tool (CSS display:table-*) is not available, then the second best (table markup) will have to do. A bunch of nested divs, with carefully matching widths and negative margins, etc is not an improvement!

I'm quite certain that the anti-table CSS mindset is second only to Internet Explorer itself for unproductive time lost forever.

NostalgiaCongrats to Safari on Acid 3

Comments

Rijk # 10. March 2008, 00:03

I do so agree. Except for really simple layouts (like a sidebar floated into the margin of the main content), creating a simple page grid with a table is much easier than relying on floating DIVs or intricately positioned elements. And using a nested DIV grid offers no semantic advantage over using a table. People fret over using the 'right' order, but they might be better of just reducing the visible content to what is really necessary. Once IE8 becomes common we might start using display:table and become more semantically pure. But... once you use a table it is tempting to start applying font-level markup to the table cells, diddle with colspan and rowspan and cellpadding and loose yourself in overconstrained table columns widths etc. Instead of limiting the table to be just a simple grid, and properly using and styling headers, paragraphs etc.

BTW, something like one of my earliest CSS 1 experiments is not that trivially easy to convert to a simple table layout

Andrew Gregory # 11. March 2008, 13:48

Thanks for the reminder, Rijk. I'd meant to mention that IE8 has added support for display:table and friends, along with quite a few other things.

The good thing is that I expect IE8 to rapidly replace IE7 when it is eventually released. However, I don't see the rate of IE6 migration to later versions to change, so that may be a delaying factor.