by Tom Dahm,
Chief Operations Officer,
Have you ever waited for a slow Web page to load, given up, clicked the browser's "Stop" button, and then suddenly seen the page appear? Where was it all that time? Pages like that are a good example of how your HTML tags can affect your page load time.
By now nearly everyone knows you should use HEIGHT and WIDTH attributes for your image tags. Using these attributes lets the browser allocate space for your image within the page layout. That way the browser can render the rest of the page, leaving a placeholder for the image while it's loading.
HEIGHT and WIDTH attributes for your TABLE and TD tags are just as important, for exactly the same reason. These attributes tell the browser how much space to allocate for each table cell. Without them, the browser waits until all the table's contents have been loaded before rendering any of its contents.
Here are a few rules of thumb:
- Use the WIDTH attribute for all your table cells.
- If possible, try to use the HEIGHT attribute for table cells. But be careful with this attribute as explained below.
- Avoid nesting tables if at all possible. Nested tables can dramatically increase your rendering time. If you must nest
tables, be sure to use the HEIGHT and WIDTH attributes, at least on the inner table.
Setting the WIDTH attribute for a table is most important in the first row, since the browser uses this row to set the column widths for all the other rows. Likewise setting the HEIGHT attribute is most important for the first cell within each table row, since this sets the height for the rest of that row.
Use of the HEIGHT attribute for tables and table cells is a bit risky, since you don't know the size of the browser's default font. If you plan your table layout assuming everyone is using a font size of 12 points, your page may not be rendered correctly for visitors who've changed their default font. Visitors who've set their browser font to 14 points may see text spill over from one cell to another because the text can't fit into the space you allocated.
There are two ways around this:
- Test your page with your browser's default font set to a larger value.
- Use the FONT tag and SIZE attribute to set the font size for each table cell.
Use absolute values, such as "SIZE=2," not relative values, like "SIZE= -1."
If you follow these rules, the HEIGHT attribute should be safe to use.
To change your browser's default font follow these steps for Netscape Navigator:
- Under the "Edit" menu, select "Preferences."
- In the Preferences window, select "Fonts".
- Set the size of the "Variable Width Font" to be some larger number.
Follow these steps for Microsoft Internet Explorer:
- Under the "View" menu, select "Internet Options."
- In the Internet Options window, click the "Fonts" button at the bottom of the window.
- Set the "Font Size" to be "Larger."
Try this and see how it affects your tables. Getting your table height just right may take a few tries, but the payoff in improved load time should be worth the trouble.