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.
BecauseCheetah Solution'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. | 
