|
Load Time Tip:
Align Tables For Faster Pages
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
In theory, style sheets are the best way lay out your Web pages, but not in practice. Because of browser incompatibility issues, tables are still the only way to create pages the display reliably across browsers. Don’t despair. Careful use of the ALIGN attribute in your TABLE tags gives you many of the design and promotional benefits of CSS positioning without the hassle of browser problems.
Problems With Traditional Table Layouts
Since they aren’t comfortable using style sheets for layout, many designers create pages using complex table designs that often include nested tables. But unless you’re careful, these table layouts can cause problems for both users and designers:
- Increased page download time: Complex nested tables download more slowly and HTML formatting tags increase file size. Our October 2001 newsletter article describes ways to speed up your tables.
- Broken pages: It’s easier to make errors in very complex code – and harder to find them when you do. Webmasters without access to HTML code checking tools like HTML Toolbox can spend hours – even days – trying to find simple errors that break pages.
- Less search engine appeal: Extra HTML code pushes your important content farther down in your source code, making it less likely that a search engine spider will give your page a high relevancy score for your keywords.
|
Cascading Style Sheets (CSS) should solve these problems, except that most browsers aren’t completely standards-compliant. The pages just don’t display reliably. Browser compatibility is a problem for all Web designers: learn more about it from our online Browser Compatibility Tutorial.
You could use a browser detection and redirection script and create several pages optimized for each browser, but that’s a lot of extra work and maintenance. Instead, consider using the ALIGN attribute to break large tables into smaller ones – without sacrificing your page layout design.
A Simple Two-Column Layout
One of the most common page layouts is easy to do with the ALIGN attribute: a left-hand navigation bar with a larger content section directly to the right of it.
Like this:
Traditionally, designers have created that layout with either a single large table with two columns or with nested tables.
You can get the same effect by breaking the columns into separate tables. Use the ALIGN attribute inside the opening TABLE tags to tell the browser where to place the tables.
Here’s how:
<table align="left" width="20%" height="100%">
<tr>
<td valign="top"><p>Place navigation information here</p></td>
</tr>
</table>
<table width="80%" height="100%" align="right">
<tr>
<td valign="top"><h1>This is the content section</h1></td>
</tr>
</table>
The first table has ALIGN="left" while the second has ALIGN="right." That tells the browser where to place the tables horizontally within the browser window.
Note the other attributes included in the opening TABLE tags:
- Width: Set the width in percentage terms to keep the two tables together. If you set them in absolute terms, such as width="200" instead of a percentage, then the tables will separate if viewed in a large browser window.
- Height: Set the height of both tables so they match. A height equal to 100% means both tables will always fill the browser window.
|
Note: the attributes ALIGN, HEIGHT and WIDTH are deprecated elements in HTML 4.0 (they’re marked for deletion in future versions), but they aren’t likely to disappear anytime soon. Currently, all browsers recognize these attributes - even though they may have trouble rendering the CSS equivalents.
Here are several example pages. Each opens in a new browser window.
Table with absolute height and width. Note how the content table moves around when you resize your browser window.
Table with percentage height and width. Note how the two tables stay nestled tightly together.
Now, there are times when the only way you can create the layout you or your client wants is by using nested tables. They usually aren’t a huge problem – unless you get important content pushed so far down inside the nested tables that the search engine spider can’t find it and the browser can’t render it.
This ALIGN technique helps you turn a single complex table into several simpler ones. You can use it with nested tables to keep your content close to the top and make your page easier to maintain and display.
Three Steps To The Top
So now you’ve decreased page download time and complexity and it’s time to make the page content more attractive to search engine spiders.
Many search engine algorithms assume that content at the top of the page is the most important – much like a newspaper headline. So spiders increase the relevance of the keywords and keywords phrases when they appear early in a Web page’s source code.
It’s a three-step process:
- Create and attach an external style sheet that contains any style declarations you’ve defined and delete the existing declarations from the HEAD section.
- Move the table that contains the page content above the navigation table, like this:
<table width="80%" height="100%" align="right">
<tr>
<td valign="top"><h1>This is the content section</h1></td>
</tr>
</table>
<table class="navigation" width="20%" height="100%">
<tr>
<td valign="top"><Place navigation information here</p></td>
</tr>
</table>
The layout is the same as before, but the content is closer to the top of the source code.
- Optimize your page for particular search engine spiders using NetMechanic’s Page Primer tool. You get valuable engine-specific tips on how to create pages that appeal to the major search engine spiders – including Google’s GoogleBot!
|
This layout technique is much like the technique used to include pull quotes on a Web page. Pull quotes draw visitors’ attention to important page content and generate visual interest without the extra download time associated with images.
Here, you’re making your pages more interesting to search engine spiders because the ALIGN attribute helps you place important content close to the top of the source code.
|
