The table layout

Last Updated: Friday, December 11, 1998. Recreated from the archived file for this guide, and labeled as a recreation wherever it appears.

That is microsoft.com as it stood on 12 December 1998, rebuilt from the archived file. The rail on the left is 158 pixels wide because a picture in it is 158 pixels wide. The orange line down the middle is a table cell one pixel across with a background color and a picture holding it open. Flip the switch and all of them turn magenta, which is the color they already are.

The author could not see his own grid either. He numbered the cells in HTML comments, inline, on every strut, so he could find his place. The numbering slips under him: 4 labels a 9 pixel cell and then two 10 pixel ones. And his ten struts add up to 618 inside a table that declares WIDTH=602. The numbers disagree, so one of them has to lose, and the browser picks: it sizes the table off the columns and ignores the tag. This grid renders 618 wide under a tag that says 602, and the readout below counts it live.

<TABLE CELLPADDING=0 CELLSPACING=0 WIDTH=602 BORDER=0>
<TR><!-- spacer row - specify all others with colspan or rowspan-->
<!--1--><TD WIDTH=7 HEIGHT=8><IMG SRC=".../1ptrans.gif" WIDTH=7 HEIGHT=8 ALT="" BORDER=0></TD>
<!--2--><TD WIDTH=158><IMG SRC=".../1ptrans.gif" WIDTH=158 HEIGHT=1 ALT="" BORDER=0></TD>
<!--3--><TD BGCOLOR="#FF3300" WIDTH=1><IMG SRC=".../1ptrans.gif" WIDTH=1 HEIGHT=1 ALT="" BORDER=0></TD>
<!--4--><TD WIDTH=9><IMG SRC=".../1ptrans.gif" WIDTH=9 HEIGHT=1 ALT="" BORDER=0></TD>

Four of the ten, verbatim. The comment on the row is his as well.

Now pull the 158. The grip is the white bar at the right edge of the second magenta segment. No CSS is involved. You are changing an integer in a WIDTH attribute on an image of nothing, and a corporate home page is obeying you. Arrow keys work too.

One switch, and nothing moves when you flip it. The layout is identical in both states. You are not changing the page. You are changing whether you can see it.

<TD WIDTH=158><IMG WIDTH=158 HEIGHT=1> struts 618 · renders 618 · TABLE says 602 · holding

Field marks

	border=0 cellpadding=0 cellspacing=0, always all three Netscape 1.1 defaulted cell padding to one and cell spacing to two, so an unzeroed grid leaked three pixels per cell. Netscape's own 1997 tables guide prints the incantation and says it gives the most compact table possible.
	One file, sixty times, sixteen sizes This page requests 1ptrans.gif sixty times at sixteen different declared sizes: 7x8, 158x1, 11x1, 1x30, 19x40. One image with many sizes is the tell.
	The transparent pixel is magenta The color table inside Microsoft's file is ff33cc and 000000 with the transparency flag set. Authors picked a color that would be obvious the day transparency failed.
	Empty ALT and BORDER=0 on every one The empty alt keeps an invisible image silent. The zero border stops Netscape drawing a blue link ring around it when it sits inside an anchor.
	The width is declared twice WIDTH on a TD was a suggestion that lost to content. The spacer inside it was the enforcement. Both numbered lines above do it, and so does every cell in this grid.

Same week, four spacers

apple.com on that same 12 December used the technique with the opposite temperament: four spacers in the whole document against Microsoft's sixty, and not one of them a grid strut. They sit inline around the hero image, twelve pixels on the left and sixteen on the right. That is left and right padding, shipped as two pictures. Apple's file is 61 bytes, a different construction doing the identical job, because there was no standard, only a habit.

What it solved, and what took it

The layout lived inside the artifact. You could open any page in the world, read its structure in tags, and copy it that afternoon with no build step and no tooling, and the description survived because it was the page. That legibility is what got abstracted away: first into stylesheets, then into class name systems, then into component libraries you do not own.

What this cost · Back to the directory.

Sources, and what is deliberately absent