A 1996 page: tables, font and a counter

Table layout is the 1990s way of arranging a page in an invisible table and styling text with the <font> and <center> tags. Semantic HTML and CSS pushed it out.

What a site looked like thirty years ago

In the last lesson you wrote a simple page: a heading, paragraphs, a link. But by the mid-nineties sites already looked different, with a colored background, a menu on the left, a banner on top and a visitor counter at the bottom. Where did all that come from, if the HTML of the time had nothing about colors or columns?

The answer is that authors learned to work around the limits. HTML was designed as a language for scientific documents, and it had no columns, no margins and no fonts. What it did have was the table: rows, cells, a background color for a cell, a width in pixels. If you slice a page with an invisible table, put the menu in one cell and the text in another, you get columns. That’s how the table went from a tool for data to a tool for layout.

The table as a grid

A table is made of rows, <tr> (table row), and a row is made of cells, <td> (table data). Attributes adjust the looks. These are the ones you’ll meet in old pages and in the practice:

• width="600" sets the table’s width in pixels;
• cellpadding and cellspacing set the space inside the cells and between them;
• colspan="2" stretches a cell across two columns, which is how a wide banner was made;
• valign="top" sticks the content to the top of the cell;
• bgcolor sets the background color.

Look at the diagram: it shows a page put together this way. Turn on “Show the table grid” and the invisible table becomes visible. Then narrow the window to the size of a phone.

Show the table grid Window width: 620 px Like a phone (360)

The window is wide enough, and the page looks as intended. Narrow the window: the table is fixed at 600 pixels wide and cannot shrink.

What a screen reader “hears”

1. Header: full width, colspan="2". Project name
2. Menu: the narrow left cell. About me, Services, Contact
3. Content: the wide right cell. First service, Second service

The cells are read in the order they stand in the file, row by row. The screen reader never announces a page title, a “menu” or “main content”. To it, these are just three cells.

Check yourself: why does a 600 pixel wide table work badly on a phone?

Its width is fixed in pixels and a table can’t shrink. If the window is narrower than 600 pixels, a horizontal scrollbar appears.

Styling with tags

The text in the table had to be colored somehow. For that, HTML 3.2 (1997) fixed a set of styling tags:

• <font face="..." size="..." color="..."> sets a typeface, a size and a color;
• <center> centers;
• <b> and <i> make text bold and italic (we’ll come back to them: they mean something different now);
• the attributes bgcolor, text and link on body color the page and its links.

Notice the principle: the styling is written into the markup itself, next to the text. If you need to change the color of the headings on all fifty pages of a site, you have to open and fix fifty files.

CSS appeared almost at the same time. Its first version became a W3C Recommendation in December 1996, and HTML 4.0 in 1997 declared the font and center tags deprecated. But for years browsers handled CSS differently, and millions of pages were written the old way for a long time.

A counter and invisible pictures

Two more tricks of the era.

The visitor counter. At the bottom of the page was a picture of digits: “You are visitor number 000123”. A script on the server drew the picture on the fly and added one each time. It was both a boast and real statistics, because authors had no other way to find out how many people had come. We have no server, so in the practice the counter will simply be a picture of digits.

The spacer GIF. HTML had no margins either. So people made a transparent picture one pixel by one pixel and stretched it with the width and height attributes to get empty space of the size they needed. The American designer David Siegel made the trick popular in his book “Creating Killer Web Sites” (1996). A page could hold dozens of these invisible pictures, and a person opening it with a screen reader heard “image, image, image”.

Check yourself: what was a spacer GIF for?

To get empty space of a given size: HTML had no other way to make a margin then.

Why nobody does this anymore

All this worked as long as a site was opened on one kind of screen. Then the approach turned out to have troubles:

1. Content is tangled with looks. To recolor a site you have to rewrite every page. A redesign became a building site.
2. Fixed widths. A site designed for a 640 × 480 screen suits neither a big monitor nor a phone.
3. No meaning. To a screen reader and a search engine, the page is a set of cells. They can only guess where the heading, the menu and the main content are.
4. Heavy code. Nested tables, empty pictures and tags around every phrase made pages heavy for a modem.
5. Fragility. Any edit in one cell could break the whole grid.

That’s why in the next lessons you’ll rebuild this page. The meaning (this is a heading, this is a menu) moves into HTML, and the looks (color, width, columns) into CSS.

One honest caveat: table layout has a last refuge. The email programs people read newsletters in still handle CSS the way it was in 2005, and emails are laid out with tables. For a website that is no reason: a site is read by browsers, and they can do everything modern.

Check yourself: name two reasons table layout went away.

Any two of these: styling is mixed with content, fixed widths break on other screens, there is no meaning for screen readers and search engines, pages are heavy.

Practice

Take your first page and turn it into a 1996 site. This is era 1 of your time machine, and its version will be the first in the gallery. Your site needs the counter picture too. We don’t have the file, so the preview shows its description from alt: let it say what the picture shows. That way you’ll also see what the attribute is for.

The page won’t be beautiful. That’s fine: you’ve just seen what old sites were made of. In the CSS part you’ll turn it into a modern site, step by step.

What was wrong with 1996, and what wasn’t

Everything this lesson is about. But some things stayed right. The page was still text: any program could open it, links worked everywhere, and the size was tens of kilobytes. Modern sites weigh hundreds of times more, and in that they may be the ones that lose.