Load Time Tip:
Speed Up Those Tables

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

Many factors affect page download time, including the total file size, connection speed, the number and size of images, and even tables. If you're using tables to control page layout, these 5 tips can help your pages display faster.

1. Break Up Your Tables

A Web page built with using a single large layout table can take a long time to render in visitors' browsers - especially visitors using dial-up connections.

So break up that giant table into several smaller ones. It's especially important to divide very long tables because browsers don't display a table at all until they can calculate its size. They need the whole thing for that. When you divide a large table into a series of smaller ones, the browser can display the smaller tables one at a time instead of waiting for the huge table to load.

Keep in mind that the top table will load and display first. Be sure it contains something interesting to visitors and not a meaningless graphic or unrelated ad. Then, as the first table displays, the second table downloads, then the third, etc. You'll have to carefully study the best way to slice up your large table to get the effect you want.

Learn how to divide your tables without destroying your page layout in our January 2000 newsletter article.

Breaking up large tables doesn't actually decrease the page download time by much. But to visitors, the page appears to download faster because they have something to look at while they're waiting.

2. Use HEIGHT And WIDTH Attributes

While smaller tables appear to load faster, tables with both the HEIGHT and WIDTH attributes actually do!

WIDTH is definitely the more important of the two attributes because it tells the browser how wide the table is. If the browser knows the width, it can go ahead and begin placing the text and images while the rest of the table is rendering. This is the same principle you use when you define the HEIGHT and WIDTH attributes of images so text can flow around them as they download.

Learn more about tables and the HEIGHT and WIDTH attribute in our January 1999 newsletter article.

3. Avoid Nested Tables

Think of a framed picture with a frame on the outside border, a mat within the frame, then the actual picture inside the mat. Well, that's how a nested table works. It's a table within a table.

Web designers nest tables as a way to have more control over page layout, but often they get broken pages instead. Inexperienced webmasters often make small errors - like not closing all the table tags - that break their page layout in some browsers.

With all the opening and closing TR, TD, and TABLE tags, nested tables take you longer to code and maintain. They're hard on the browser too: it has to slowly work to figure out the table structure working from the inside out. A browser can't display the inner table until it knows what the outer table looks like and it can't display the outer table until it has the inner table figured out.

Sometimes you really need a nested table, but make it as simple as possible. Also consider if you could achieve the same effect by using colored table cells or the COLSPAN or ROWSPAN attributes inside a single table.

4. Use Percentage Cell Widths

It pays to have a calculator handy if you have a multi-column table with widths defined for each individual cell.

The browser won't have any trouble rendering a table with the width set to 480 pixels, but will get confused if your defined cell widths add up to 560 pixels. The table will take longer to display while the browser decides what to do. The browser won't trim down any of your cell widths, so your total table width will equal 560. That could push your table off to the side or somewhere that you don't want it.

If possible, define your individual cells in percentage terms. A 5-cell table might have widths set to 10%, 15%, 50%, 15%, and 10% respectively. Since the browser knows the total table width is 480 pixels, it can quickly calculate the widths of the individual cells. Just make sure the percentages add up right and remember to take any COLSPAN attributes into account.

5. Use Style Sheets

Yes, we know. You use tables because you can't trust browsers to render style sheets correctly!

But you can really boost the speed of your pages using CSS2's table layout property. This property lets you set the table layout to be "fixed." That is, you're setting the column widths and heights for the entire table. Using this property, browsers that support CSS2 (Explorer 5.5+ and Netscape 6.x) can render the table progressively on the screen even more quickly than tables using the regular HEIGHT and WIDTH attributes.

The obvious downside is that only the most recent browsers support the table layout property and users are very, very slow to upgrade. Although it's a great technique, avoid it for now unless you're absolutely sure that your visitors will be using a compatible browser.

However, there are style sheet definitions that do display accurately across browsers and reduce file size. Remember: if you don't use style sheets to control table formatting, you have to attach text-formatting instructions to each cell in the table.

That's a LOT of code that you can easily eliminate by using style sheets to format table data. Our August 2001 newsletter story shows you how to avoid some common Netscape bugs when you format tables.

Measure Your Success

When you start optimizing your site, look at your homepage first. That's generally the first stop for most visitors. If the page doesn't load in 8 seconds, you could lose up to 1/3 them!

Then rank your pages in order of importance and load time. A quick way to identify problem pages is to analyze them with HTML Toolbox. It will alert you to slow loading pages and help you identify the problem elements on each page. After you make each change, check its effect on layout and download time.

It's critical to know your page download time and improve it if you can. A simple, fast-loading Web page with valuable content will keep visitors coming back for more.