td204

Web development, one post per year since 2002

2002 in review: tables, spacer GIFs and a folder full of .htm

A year of building sites out of about 180 GIFs, 120 .htm files and no stylesheet at all.

Two things stand out. This is the year I properly learned HTML, because there was nothing else to hide behind. And the technique itself has outlived almost everything that replaced it, which I will get to at the end.

Layout was a table, and the table was nested

Every page was a grid of <table> elements, three or four deep, with cellspacing="0" and cellpadding="0" on all of them. Column widths were pixel values. A one-pixel transparent GIF, stretched with width and height, is what we used where you would now write padding or gap.

Nothing about that was considered a hack at the time. It was simply how you made two columns.

<table width="782" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="180" valign="top"><img src="spacer.gif" width="180" height="1"></td>
    <td width="12"><img src="spacer.gif" width="12" height="1"></td>
    <td valign="top">Content</td>
  </tr>
</table>

That width="782" is not arbitrary. It is 800 pixels minus the scrollbar and the window chrome, because the screen was 800x600 and the design was fixed-width. The fixed width is the part that had to go. The tables, as it turns out, did not.

Presentation lived in attributes

Background images were an attribute on <body>. Text colour was <font color="">. Bold was <b>. There is no stylesheet in the 2002 folders at all, and no separation between what a thing is and what it looks like, because the language did not really offer one yet and the browsers did not agree about the parts that existed.

Everything was a file

No build, no includes, no templating. A site was a directory of .htm files, and a change to the navigation meant opening every one of them and editing the same block by hand. If you forgot one, that page kept the old menu until a visitor told you.

This is the actual reason the next few years went the way they did. Every tool I adopted between 2003 and 2006 exists to solve exactly this problem: the same markup, copied into fifty files, drifting.

Where this actually got me

This is where I learned HTML. Not the tags, the behaviour. When your entire layout is tables, you find out exactly how the browser sizes a cell, what happens when content is wider than the column you declared, how valign interacts with a row that has one tall cell in it, and why a stray whitespace character between two <td> elements moves your design. You cannot hide behind a framework because there is not one. Everything the page does, you did.

It also taught me why CSS had to exist, by making the absence of it concrete. When the colour of your links lives in a <font> tag repeated four hundred times, nobody has to sell you on a stylesheet. I wanted the separation before I knew there was a word for it, which is why I picked it up the moment it became usable.

Tables did not die, they moved to email

The part I did not see coming: the technique never actually died. HTML email is still built exactly like this. Mail clients render with engines that are decades apart, several strip or ignore <style> blocks, some drop external CSS entirely, and support for anything modern is a lottery. So you build with nested tables, inline every style attribute, and size things in pixels.

<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding:24px; font-family:Arial,sans-serif; font-size:16px; line-height:24px;">
      Content
    </td>
  </tr>
</table>

That is 2002 markup with two modern additions: role="presentation", so a screen reader does not announce a layout table as data, and the styles inline rather than in a <font> tag.

I wrote in an email in 2015 that a reasonably responsive newsletter was achievable by then, "although it is still tables work". Eleven years further on it is still tables work. Every hour I spent nesting them in 2002 is an hour I have quietly billed back on every newsletter template since.

In short

First full year of building sites, entirely in tables and GIFs, with no stylesheet and every page its own file.