Search engine friendly tables

[troyid]

One of my sites layout is designed using tables. The page is divided into three columns. Left column for navigation, middle column for content, and right column for advertising.

At the moment the search engines would read the navigation bar on the left first. My aim is for the search engines to read the middle column first. I have instructions on how to achieve this with a 2 column scenario but not 3 columns.

[creative craig]

if you search for the 3 colum layout out trick you should be able to come up with a very good solution.

[troyid]

Can you please point me to the topic

[creative craig]

Cant find it, so I will try and explain :)

Design your table with two rows and three colums to start with. In the first cell of the first row place an image spacer (5x5 should do it) in the next cell place your main content and then in the next cell of the row place your adsense code ;)

In the first cell of the second row place your navigation for the site.

When you look at your code it places your main content before your navigation and the search engine spider will see this.

I hope that made sense :)

[troyid]

I feel like a real dummy. I tried your suggestion. My left navigation bar keeps showing down the page meaning it is not aligning on the top of the page with the middle and right columns.

Can you post the html code of your suggestion.

[isorg]

In the <td> for the main text (i.e. row 1, column 2), you must change this to: <td rowspan=2> AND then completely remove the <td>...</td> for row 2 column 2. This makes the text column span 2 rows, and so the navigation would not be pushed down...

[creative craig]

isorg beat me to it :) I never was much of a teacher!

[troyid]

Almost there.

This is how my code is looking. Am I correct because I find that the 3rd column text sits higher than the left and middle.

<table border="0">
<tr>
<td><img src="5x5.gif" width="5" height="5"></td>
<td rowspan="2">middle column text</td>
<td>right column text</td>
</tr>
<tr>
<td>left column text</td>
<td></td>
</tr>
</table>

[isorg]

Try this:

<table border=0 cellspacing=0 cellpadding=7>
<tr>
<td></td>
<td rowspan="2"><p>middle column text</td>
<td></td>
</tr>

<tr>
<td valign="top"><p>Site navigation goes here</td>
<td><p>Some advertising can go here</td>
</tr>
</table>

I would check it in different browsers, because they will render the blank cells (i.e. 1,1 and 1,3) slightly differently.

Some people would put a blank 1x1 image in the empty cells. But this can distort the alignment of the 3 columns in the 1st row. So sometimes I leave the empty cells entirely blank like in this example. Alternatively (and probably the safest option), use the blank cells for something useful/decorative e.g. maybe a <hr> or your logo linking to the homepage.

To see exactly where the cells are, change the border=0 to border=1 and then you can experiement with it.

[troyid]

I got it to work. This is how my code ended up. Thanks so much isorg and creative_craig for your contributions.

A 3 column layout with the middle column content at the top of the page. Perfect for SEO.

<table border="0" cellspacing="0" cellpadding="7" align="center">
<tr>
<td></td>
<td width="50%" rowspan="2" valign="top"><p>middle column text</p></td>
<td></td>
</tr>
<tr>
<td width="25%" valign="top"><p>Site navigation goes here</p></td>
<td width="25%" valign="top">Some advertising can go here</td>
</tr>
</table>

[isorg]

Cool!

[Nick_W]

Bit late to the party but I think this was the thread: [webmasterworld.com...]

Nick