Now that all major browsers support tables, it's hard not to use them when we want more control over our HTML pages. However, if you have large pages, it may not be a good idea to place most of your page inside a single table.
For example, consider the following code:
<HTML><BODY>
<TABLE WIDTH="80%"
CELLSPACING=0 CELLPADDING=0 BGCOLOR="#EEEEEE">
<TR><TD>
Paragraph #1.<BR>
Paragraph #2.<BR>
Paragraph #3.<BR>
</TD></TR>
</TABLE>
</BODY></HTML>
Result:
Paragraph #1.
Paragraph #2.
Paragraph #3.
|
Most browsers aren't capable of displaying the above page until all of the page is downloaded on to the local computer. This is because browsers can't render a table until the HTML tags inside its cells are loaded, or untill all tags between the starting <TABLE ...> and the ending </TABLE> tag are available to the browser.
Now let's look at another version of the above sample page:
<HTML><BODY>
<TABLE WIDTH="80%"
CELLSPACING=0 CELLPADDING=0 BGCOLOR="#EEEEEE">
<TR><TD>Paragraph #1.</TD></TR>
</TABLE>
<TABLE WIDTH="80%"
CELLSPACING=0 CELLPADDING=0 BGCOLOR="#EEEEEE">
<TR><TD>Paragraph #2.</TD></TR>
</TABLE>
<TABLE WIDTH="80%"
CELLSPACING=0 CELLPADDING=0 BGCOLOR="#EEEEEE">
<TR><TD>Paragraph #3.</TD></TR>
</TABLE>
</BODY></HTML>
Result:
We still use tables, howver, unlike in the first example this time we divide and place our page in smaller outer tables. This version will be displayed, or rendered, faster than the first version because the browser can now download and construct smaller tables at the top without waiting for the rest of the tags to be downloaded. If you have multiple tables inside tables this could take even longer to render not only because of the time it would take to download necessary HTML tags, but also because of the number of calculations that needs to be made to determine the locations of the borders and cell sizes.
So, think twice before placing your content inside an outer table if you have a lot of it. If you must use tables and you serve banner advertisements on your pages, for example, you may want to create at least two tables -- one to hold the banner and the other to hold your content. The logic being the top table holding the banner will be displayed first while loading the following table containing your content. This should make your sponsers happy since your visitors would be looking at their banner while waiting for the page to load in full. |