Sharing the 'table trick' - worth considering

  • Thread starter broadband-engine
  • Start date
B

broadband-engine

Hi

Recently come across this technique and thought it was worth sharing, basically it allows you to perform a 'table trick' putting your content to the top of the page, and your menu to the bottom of the page without the on-page look changing... read on...

Web site Architecture

[this is brought to you courtesy of www.bruceclay.com/SEO-tech-tips/techtips.htm]

Tables are causing long navigation lists to be seen as the first content

Your site is developed in "tables" and by the time the search engines encounter your "main content" it is too far down the page for the spider to consider it important. Generally the text at the top of the page is the more important text, and sometimes site design pushes the main body content hundreds of lines from the top of the page source file.

A normal web page usually has a header, a nav bar that is usually on the left side of the page, and the main content is on the right. The search engines usually look at many page attributes, i.e., title, description, and at least the first 200 words of your content after your opening <body> tag. The engines do spider your whole page but if your nav bar lists many products, the search engine may not encounter your main body within the first 200 words.

How to correct this problem.

This technique known as the "table trick".

Most of the search engines will read a table a certain way. They will find the opening <table> tag and look for the first "table row" <tr>. They will begin to read each "data set" <td>"data"</td> inside the "table row" from left to right until they find the closing </tr> tag. They will try to keep going until they find the closing </table> tag. They will continue until they have crawled the entire page. Your "main body content" is usually where you would have most of your keyword phrases and the "relevant" body copy that you would want the search engine to index. Knowing that the spider will often try to figure out your "theme" within the first 200 words of your site you would want them to see the relevant text as soon as possible. The table technique will "push" your left-side navigation (etcetera) bar down below your body content and "pull" up your body content so it will usually be within the first 200 words.



Code to copy and paste
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Table based page with implementation of the "Table Technique"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>

<body>
<font size="2" face="Verdana, Arial, Helvetica, sans-serif">&quot;View
Source&quot; to see where to insert the &quot;empty data set&quot; &lt;td&gt;&lt;/td&gt;.


You will notice that the nav bar has moved to the bottom of the source, next to
the footer.
</font>

<table width="100%" >

<tr align="center" valign="top">
<td colspan="2">


<table width="100%" border="1" align="center" >
<tr>
<td align="center" valign="top"><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Page Header</font></div></td>

</tr>
</table>


</td>
</tr>


<!-- start table technique...
it only consists of one <td></td> inside the same <tr> as the table technique and body copy -->
<tr>
<td align="left" valign="top">
</td>




<td width="100%" height="100%" rowspan="2" align="left" valign="top">


<!-- DEPENDING ON WHICH PAGE YOU'RE LOOKING AT, YOU SHOULD NOTICE THE LOCATION

OF THE BODY. IS IT NEAR THE TOP OF THE CODE OR NEAR THE BOTTOM? -->

<table width="100%" height="100%" border="1" align="left" >
<tr>
<td align="center" valign="top"><div align="center">


</p>


</p>



<font size="3" face="Verdana, Arial, Helvetica, sans-serif">Body Content</font></p>
</div></td>
</tr>
</table>


</td>
</tr>



<tr>

<td align="left" valign="top">


<!-- DEPENDING ON WHICH PAGE YOU'RE LOOKING AT, YOU SHOULD NOTICE THE LOCATION

OF THE NAV. IS IT NEAR THE TOP OF THE CODE OR NEAR THE BOTTOM? -->

<table width="100%" height="100%" border="1" align="left" >
<tr>
<td align="left" valign="top"><p align="left">
<font size="2" face="Verdana, Arial, Helvetica, sans-serif">
Product 1

Product 2


Product 3

Product 4

Product 5</font>
</td>
</tr>
</table>


</td>

</tr>
</table>


<table width="100%" border="1" align="center" >
<tr>
<td align="center" valign="top"><div align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Page Footer</font></div></td>
</tr>
</table>

</body>
</html>

the above looks like this http://www.bruceclay.com/SEO-tech-tips/table-technique-yes.htm

If you are building a site from scratch this technique is well worth working into your design.

All the Best, and Happy New Year to All

Phil
 
B

broadband-engine

Hi

Glad to be of help :D

I am using this technique on a 'text version' of my site. The graphically designed site, well, I had not discovered this technique when it was originally created... doh!

Cheers
Phil
 
Upvote 0
Of course you could just use modern web design techniques such as using divs and CSS to position the elements wherever you want. This would have the bonus of reducing filesize and "padding code" even more, and promote accessibility. But all in all for those who "have" to use tables to layout a site this is a nice hack.
 
Upvote 0
I agree with Vigo that it would be much better if you could avoid tables (accept for tabular information) and use CSS markup. Typically such sites put content in the stream first with navigation and "street furniture" coming last. Tables and the like, even if at the bottom,add a lot of rubbish to the stream and makes the page much less attractive to many search engines as well as making it more difficult in many cases for the less able to navigate if using alternative interface technology (joysticks instead of mice, screen readers, etc.).

Clever though.

Stuart
 
Upvote 0

Latest Articles

Join UK Business Forums for free business advice