The Table Trick

As mentioned in "Website optimization", a table-based layout usually works well with search engines. However, a traditional design that contains the menu on the left and the content on the right does have one downside.

In many cases, such a layout will cause your navigation menu to appear above your content in the source code. This is unlikely to create any major problems, but might make it slightly harder for your pages to obtain good rankings.

Correcting this issue seems relatively simple, at least at first. It can be done by making some minor changes to the way your tables are arranged. The procedure is widely known in SEO circles as "the table trick".

Note that this article contains some examples in HTML code. Hence, a basic knowledge of HTML is necessary in order to use this information to the fullest.

A normal table layout with the content on the right and the menu on the left looks something like this:

To switch the order in which the content and the menu appear in the code, we'll need to make a few simple changes:

As you can see, we've added one empty table cell and a new table row. We've also included a rowspan=2 statement to the table cell that contains the content.

Because the table cell we added is empty, it doesn't cause major changes to what users will see. It is only shown in the picture above to make it easier to understand how the code works. The content, however, now appears above the menu in the source code.

Unfortunately, if you really want to use the table trick, you'll need a more complicated solution than this one.

Beyond the basic table trick

The table trick we presented above really isn't suitable for use. If your menu is on the top left and your content on the right, just like this site does, you'd be happy for a while. Until one day you'd write a long article for one of your pages and notice that

Instead of this...	you would get this.

When the length of the content greatly exceeds the length of the menu, funny things start to happen. The menu drops downwards, which usually pretty much ruins the design. However, there is a relatively simple fix for this issue - just add "valign=top" to the <td> statement the menu is contained in:

Now the menu should stay at the top, no matter how long the content page is.

Because APG's design contains a background image, we've also added one more workaround to our table trick code.

As explained earlier, the table trick is based on creating one empty table cell that is positioned directly above the menu. However, Netscape Navigator 4 does not apply a background to a table cell that is empty. So, we've added a transparent 1x1 pixel .gif image to prevent Netscape 4 from turning a small area in top of the menu from grey to white:

Does it now work properly?

Yes, unless the visitor happens to use a browser that is more or less buggy. The navigation may still drop a bit in Netscape Navigator 4 or some old (pre-5, but at least v4 for PC should work fine) versions of Internet Explorer. However, this should not be a major concern, as only around 5% of Internet users use those browsers and the percentage is constantly decreasing.

Is it possible to adjust the table trick to work perfectly with NN4 and those old IE's? Probably yes, but I haven't found a reasonable way of doing it. There are some makeshift solutions that will work. However, they require a lot of effort and may also cause problems with other browsers. Just comfort yourself with the fact that nearly any kind of design will look broken on some browser or screen resolution.