SfC Home > Web Design >

Explanation of SEO Table Trick for Left-Hand Navigation - Succeed in Web Design. Also refer search engine optimization, spider, robot, webot, content, HTML code, column span, Ron Kurtus, School for Champions. Copyright © Restrictions

SEO Table Trick for Left-Hand Navigation

by Ron Kurtus (25 June 2008)

Website managers—especially those involved in e-commerce sites—are often concerned about optimizing their sites for search engine placement (SEO). One factor is how the search engine spiders, robots or webots examine the text in your web pages as part of their classification of the page. It is believed that often the beginning paragraphs are given the most weight in the classification.

In this situation, a problem occurs when your page is organized with tables and includes a left-hand navigation column (such as this page), because the left column of the table is read first by the robot. This could provide misinformation about the content of your web page.

By using what is popularly called the "table trick", the navigation column can be read after the content column. This method is sometimes used in sites seeking SEO. The problem is that the page may not look at good using the table trick. Also, some experts say that it is not even necessary.

Questions you may have include:

• What does left-hand navigation code look like for a table?
• What does the table trick cold look like ?
• What is a problem with the method?

This lesson will answer those questions. There is a mini-quiz near the end of the lesson.

Page with left-hand navigation column

Consider a web page with left-hand navigation, such as:

Although many websites have switched over to using cascading style sheets (CSS) and division tags <DIV>, there still are many web designers who prefer using tables.

The typical HTML configuration for such a table is:

<TABLE BORDER="1" CELLPADDING="10">
<TR>
<TD WIDTH="20%">
<P>Left column navigation material<P>
</TD>
<TD WIDTH="80%">
<P>Content area<P>
</TD>
</TR>
</TABLE>

When the web robot or webot reads this page, it reads the text in the HTML code from top from bottom. Some webots may weigh the navigation text over the content material.

Table trick adds a row

The so-called "table trick" consists of putting an added row to change the order that the material is read.

<TABLE BORDER="1" CELLPADDING="10">
<TR>
<TD>
<P>(Home page link or a blank column)</P>
</TD>
<TD ROWSPAN="2">
<P>Content area</P>
</TD>
</TR>
<TR>
<TD VALIGN="TOP">
<P>Left column navigation material</P>
</TD>
</TR>
</TABLE>

What you now have are two rows with the left column listed at the end of the table. This means the web robot will read the navigation column last.

Problem of method

A possible problem with this method is that there is a disconnect in the left column between your Home page link and the rest of your navigation.

If you use CELLPADDING="10", this cell will be over 20 pixels in height, even when empty. Some designers would find this look unacceptable.

Is this even necessary?

Another point about using the table trick is the question of whether it is even necessary. Some experts on SEO say that the first paragraphs are emphasized when search engine robots examine your site. But others contend that the engines are sophisticated enough to know what is navigation and what is content.

Our site

We first tried using the table trick on this site but found that it just didn't look right. We decided to take a chance that the webots are able to tell what is navigation and what is content.

Summary

In an effort to improve search engine classification of a web page that is organized with a left-hand navigation table column, what is called the table trick can be used. This technique makes the navigation column to be read after the content column, enhancing SEO. The problem is that the page may not look at good using the table trick. Also, some experts say that this rearrangement is not even necessary.

Answers to Readers' Questions

Try some clever methods

Resources

The following resources provide information on this subject:

Websites

Web Page Design Resources

Books

Top-rated books on Website Design

Miscellaneous

Mini-quiz to check your understanding

1. Why wouldn't you use DIV with CSS instead of TABLES?

2. What does ROWSPAN="2" mean?

3. What happens if top row in the left side is left blank?

If you got all three correct, you are on your way to becoming a Champion in Web Design. If you had problems, you had better look over the material again.

What do you think?

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. We will try to get back to you as soon as possible.

Share link

Feel free to establish a link from your website to pages in this site.

Or use our form to send this link to yourself or a friend.

Students and researchers

The Web address of this page is
www.school-for-champions.com/web/seo_table_trick.htm.

Please include it as a reference in your report, document, or thesis.

Where can you go from here?

School for Champions

Web Design topics

SEO Table Trick for Left-Hand Navigation