Webpage optimization - the HTML table trick

To rank slightly better in the search engines, one thing you can do is to optimize the source code of your webpages in such a way that your most important keyword focused content is placed as high as possible inside the source code.

If your website layout uses a sidebar on the left, you will usually find the content of this sidebar above the main content inside the source code. Here is where the HTML table trick comes into play. Let´s take a look at a very simple example.

title trick scratch 1

The scratch on the left shows you a simple website layout with a header box, a left sidebar (menu) box, the main content box and finally a footer box, designed purely in CSS.

In the two boxes below, you see the CSS stylesheet and the relevant part of the HTML source code which both together form this website layout. As you can easily see in the source code, the sidebar content comes first and the more important keyword focused main content of the page is moved downwards.


Stylesheet (styles.css)

#wrapper {
width: 700px;
margin: 0 auto;
border: 2px solid #369;
}

#header {
width: 100%;
border-bottom: 1px solid #369;
margin: 0;
padding: 0;
}

#menu {
width: 200px;
float: left;
border-right: 1px solid #369;
margin: 0;
padding: 5px;
}

#content {
width: 500px;
border: none;
margin: 0;
padding: 5px;
}

#footer {
width: 100%;
border-top: 1px solid #369;
margin: 0;
padding: 5px;
}

HTML source code

<hmtl>
<title>webpage title</title>
<link rel="stylesheet" type="text/css" href="styles.css">

<body>

<div id="wrapper">

<div id="header">
Your Website Header Goes Here.
</div>

<div id="menu">
This is the sidebar ( menu ) of your webpage. As you can see, it comes before the main content inside the source code of your webpage. And this could be quite a lof of stuff if you have many links and ads in your sidebar.
</div>

<div id="content">
This is the box for the main content of your webpage, starting with the H1 heading.
</div>

<div id="footer">
Your Website Footer Goes Here.
</div>

</div>
</body>
&l6;/html>


title trick scratch 2

In order to move the main content above the left sidebar inside the source code, you can use the following layout trick using a HTML table with two rows and two columns like illustrated in the scratch on the left.

The first table cell in the first table row has the same width as the sidebar but it remains empty, so it´s only a few pixels in height and can´t be seen by your visitors. The second table cell in the first row spans over two rows and forms the largest box which contains your main content.

Only in the second row, you will find the sidebar content inside the first table cell. Take a look at the source code below and you will see how the main content is moved towards the top while the visible layout remains almost the same.

Stylesheet (styles.css)

#wrapper {
width: 98%;
margin: 0 auto;
border: 2px solid #369;
}

#header {
width: 100%;
border-bottom: 1px solid #369;
margin: 0;
padding: 0;
}

#table {
width: 100%;
border-collapse: collapse;
border: none;
}

#empty {
width; 200px;
border-right: 1px solid #369;
margin: 0;
padding: 0;
}

#menu {
width: 200px;
border-right: 1px solid #369;
margin: 0;
padding: 5px;
vertical-align: top;
}

#content {
width: 500px;
border: none;
margin: 0;
padding: 5px;
vertical-align: top;
}

#footer {
width: 100%;
border-top: 1px solid #369;
margin: 0;
padding: 5px;
}

HTML source code

<hmtl>
<title>webpage title</title>
<link rel="stylesheet" type="text/css" href="styles.css">

<body>

<div id="wrapper">

<div id="header">
Your Website Header Goes Here.
</div>

<table id="table">
<tr>
<td id="empty"></td>

<td rowspan="2" id="content">

This is the second table data cell in the first row and contains the main content of your webpage. Notice how it spans two rows and inside the source code, it now stands above the sidebar content.

</td>

</tr>

<tr>
<td id="menu">
That´s the table data cell which contains the sidebar (menu) content.
</td>
</tr>

</table>

<div id="footer">
Your Website Footer Goes Here.
</div>

</div>
</body>
</html>


Feel free to copy the codes from the boxes above, experiment with them and modify and use them for your websites. Get my HTML video tutorial if you want to learn html with ease.

Category: HTML, Web Design
Social Bookmarks: - (what´s this?) - spread the word!

Stumble Delicious Technorati Digg Reddit socialmarker(more bookmarking services)

12 Comments »

  1. Pingback by:
    Blog Archive » Website layout with HTML tables versus CSS

    […] Using the HTML table trick ( see templates in my html tutorial, I can create a search engine optimized website layout with 3 columns (2 sidebars and the center column with the main content). Usually, using a pure CSS layout, the content of the left column would come first in the source code, then the main content and finally the right column. But with the HTML table trick, I can move the main content to the top in the source code. […]

  2. Comment by:
    Jeff

    This is a very good resource on the internet, Guido. Well done. I found your site very useful, thank you!!

  3. Comment by:
    dg

    Your trick works in Firefox just fine, but IE doesn’t display the same way. IE will continue to shrink the menu cell and ignore the width and if an image or unbreakable text is inserted longer than 200px IE will also expand the cell. Like it or not IE is still used by more people than any other browser.

  4. Comment by:
    dg

    Also, I believe here:
    you meant: ** rowspan=”2″

    dg - yes, I meant “rowspan” … sorry for the typo, I´ve corrected it. Also, I must say that it works well in IE6 and IE7, too. I don´t know why you say that IE ignores the width and that it shrinks the menu cell - it doesn´t on my sites. If it does on your site, maybe you need to use a different HTML Doctype declaration.

    Of course does an image that is wider than the menu cell expand it, just like unbreakable text will do the same. But not only in IE. But why on earth would one want to include unbreakable text or larger images in a narrow sidebar. If you have images of a certain width - make sure the sidebar is wide enough. 200px is just an example. Make it wider if you need to. It wouldn´t make much sense to overlap two sections of a page.

  5. Comment by:
    Ore

    Super Informationen verpackt in einem tollen Design.

  6. Comment by:
    RaymonWazerri

    Hey,
    I love what you’e doing!
    Don’t ever change and best of luck.

    Raymon W.

  7. Pingback by:
    Tony Hill’s Blog » Blog Archive » Steps To Taking Advantage Of Top Paying Ads

    […] 1. Remove your top leader board if it’s above all your content. In my experience this is a waste of AdSense space. Leave this to a CPM publishing program. This will allow your top payer to show up on your square block within the top of your content (you have one don’t you?) 2. Use the html table menu trick (or css) if you have AdLinks on your right-hand side menu navigation. Typically, in a table format this will show up first in your HTML code. With a simple table layout trick you can get this bumped down to the bottom of your HTML […]

  8. Comment by:
    Tracy

    I personally like to have my title and description meta tags as high as possible, seems to be working well. I do not bother with a keyword tag as its only real use is for mis-spelt keywords, something I have very little interest in.

  9. Comment by:
    gino

    I used only html files and format in my web, and I notice that some times it gets corrupted with the frames, and I have to delete them and create them again. It is very hard to be a webmaster, some times I don’t sleep thinking how I can do it better and in addition to the hard job I have to worry about traffic and search engines. I will try your suggestion Thanks Guido. http://www.solidamerica.com

  10. Comment by:
    moi

    Has anyone tried this with WordPress?

  11. Comment by:
    Casey

    Thank you so much, it worked perfectly. I’ve been looking all over to find someone who could explain this to me. Now when the spiders look at my page they are getting a much better idea what the main topic is all about. Thanks again.

  12. Comment by:
    Peter Martin

    Empty table cells can get collapsed in IE just make sure you add a none breaking space ”   ” inside that will force IE to render the cell.

RSS feed for comments on this post. TrackBack URI

Leave a comment

If you want to leave a feedback to this post or to some other user´s comment, simply fill out the form below.