Table Trick

I've been asked many times about how to perform this table trick, where one can put the CODE for a left-hand navigation bar AFTER the text of the page, and still have the navigation bar display over on the left. Here's the code to perform this feat. Feel free to steal it and use it by just selecting it and copying it.


<html>
<head>
</head>
<body>
<table>
<tr valign="top">
<td><!-- leave this TD empty - it will disappear --></td>
<td rowspan=2>Put the text for the page here. </td>
</tr>
<tr valign="top">
<td>Put the Navigation Bar Here</td>
</tr>
</table>
</body>
</html>

That rowspan=2 inside the TD (table data) is what does it. This table displays with the navigation bar on the left and the text of the page on the right. That allows you to get the text for your page closer to the top of the page, so that it is within the first 3kb of the page.

Why is this important? The closer to the beginning of the file, the more important the text in it seems to be to Google.

To see this table trick at work, visit the Dark Horse Ranch website and click VIEW | SOURCE for the page.

Feel free to contact us if you have any questions about how to use this table trick. For general instruction on how to use HTML, see our books page and order the HTML Goodies book.

Note: In Internet Explorer version 6.x, The Table Trick can trigger a bug that makes the contents of the left-hand navigation column drift down the page toward the center of the text in the right-hand column. If you put some <br> tags inside the <td> containing your navigation bar, after the end of your navigation bar, it will go back up to the top of the table where it belongs.

Virtual Includes

While that table trick above works, you should know that you can (and perhaps ought to) also use "virtual includes" for such standard items as navigation bars, copyright notices, banner ad display areas and suchlike items -- things that will be identical from page to page on every page of a website. Virtual includes will lessen the amount of time you spend cutting and pasting (and revising) those standard "boilerplate" items that are on every page of a site. The "virtual include" command works like this:

<html>
<head>
</head>
<body>
<!--#include virtual="navbar.inc" -->

Text of the page goes here

More content, content, content, etc.

<!--#include virtual="copyrightnotice.inc" -->

</body>
</html>

For this to work on a UNIX server, you either need to name your files like this: "file.shtml" (the .shtml extension tells the server to parse for include commands)

OR

if it is going to be a lot of trouble to name or rename the files so they have .shtml extensions instead of .html extensions, there is a way to have the server parse your .html files for includes without having to rename them as .shtml files. Create (or modify, if it already exists) the file named ".htaccess" in your root directory and insert into that file this line:

AddType text/x-server-parsed-html html

The great thing about virtual includes is that you can make just one change to your copyright notice, or to your navigation bar, and it will show up on all the pages where it is included. If you're doing a big website with hundreds or thousands of pages with identical content in the navigation bar, banner ad area, copyright notice, ezine subscription box, and so on, these virtual includes can save you a lot of time if you ever have to revise these things. Make the change to the included file -- and viola! you're done across the entire site.

When NOT to use virtual includes:

1) When the navigation bar is different on every page.

2) Virtual includes make the server work harder to serve up the same information. If your server is already overtaxed virtual includes may not be a good idea as they may slow down the presentation of the information to your visitors. When in doubt -- check with your web hosting provider or system administrator, or run a test and see for yourself.

To see these virtual includes working well, visit our client site, Chandler's Soaps. If you view source, you won't see the "include" comments -- you will probably only see what's being called by the "include" command. In that case, the "include" command has already been replaced by "the information which is being included" when it is displayed in your browser.

Table-less Design

We don't use the table trick on the Words in a Row Website because we don't use tables in this design. If you must have a table-based design, we highly recommend using the table trick. But if you aren't stuck in a table-based design, we recommend using simple, clean and descriptive code -- placing all styles in an external style sheet.

Return to Top of Page.

Back to Design page.

Back to SEO page.
Last updated 2017-08-23.

Overview

How to put the code for a left-hand menu AFTER the code for the main body of text on a page.

To bookmark this page in your favorites, press CTRL+D.

search engine optimization bookmark

Home Design SEO Marketing Writing Tools Books Clients Contact Email Lists

SEO by Words in a Row