Extreme HTML Optimization: Tables
  
|
Extreme HTML Optimization
Tables and CSS2
It's unfortunate that tables came out before CSS2. Tables have polluted the Web with unnecessary presentation embedded in millions of pages (our site is no exception, but we're optimized). Originally designed for tabular data, designers quickly discovered that tables can be used for crude page layout. The single pixel GIF trick (use "t.gif" not "global/images/onepixel.gif"), table cell background colors, etc. all evolved to morph tables into a page layout mechanism. There's a better way to lay out your pages: CSS2. Our own HTML with Style columnist uses this technique to good effect, achieving a table-like look without tables. The techniques outlined here work equally well for table or non-table designs, and we'll touch on CSS2 later. If you are using tables, here are some things you can do to speed up their display.
Simplify Complex Tables
Browsers do a lot of work rendering complex nested tables. Try to unwind your designs and use the least number of nested tables, and simplify them to avoid long page displays.
Layered Tables
Break your tables up into separate tables, with a simple fast loading table at the top (see webref.com, or CNET for examples), and subsequent tables underneath. Browsers render tables sequentially, giving the user something to look at quickly first, while the rest of your page loads. We now use three tables on the front page, with a new second "above the fold" webref-specific table seamlessly joined with a third table below it. This sped up the display of our front page above the fold content considerably by lightening the bytes and complexity inside the critical second "above the fold" table.
Fast Table Rendering
With browsers that support CSS2 like IE5.5 and NS6, tables can get a big speed boost with the new table-layout property. When you set the table-layout to a "fixed" table layout, you are fixing the column widths (and optionally the column heights) for the entire table. For these newer browsers this setting greatly increases the parsing and display performance of tables. This allows the table to be rendered progressively to the screen.
<STYLE TYPE="text/css">
<--
TABLE {table-layout:fixed; width: 100%}
#fixed COL {width: 50%}
-->
</STYLE>
<TABLE>
<COL><COL>
<TR><TD>Cell 1</TD><TD>Cell 2</TD></TR>
<TR><TD>Cell 3</TD><TD>Cell 3</TD></TR>
</TABLE>
The fixed table layout algorithm computes the size of each column based on the first cell in each column, so make sure that cell is the widest one in your column. I tried this technique on the home page with mixed results. After sizing the initial cells properly, the tables flew onto the screen. However, changing the font size in the browser sometimes clipped the text in Netscape 6, so further research is needed into this technique.
Optional Closing Tags
Theoretically you can omit the closing </TD> and </TR> tags from your tables, HTML 4.01 does not require them. However, older versions of Netscape can choke on this technique. We are still experimenting with this, as it would save a substantial amount of space for our tabled front page.
Minimize Attributes
By using more global attributes you can save space. Use CSS to style your cells, or use one TR ALIGN=CENTER|RIGHT not many TD ALIGN=CENTER|RIGHTs. Use CELLPADDING or CELLSPACING for spacing around tables rather than TDs.
Colored Cells
Speaking of attributes, you can save space and a trip to the server by using colored table cells instead of background or inline images.
<TABLE>
<TR><TD BGCOLOR="#FFCC00">...
This can of course also be done with style sheets, for version 4+ browsers.
Inline Comments
If you have to have comments inside your pages (we recommend a template system to avoid this) you can instead put comments inside table tags, like this:
<TABLE footer>
footer is ignored, but can be useful for folks not familiar with the page's layout.
Tables and Returns
Earlier versions of Netscape can add extra space to your table cells if you put a return after a TD. You can ensure that won't happen, while saving additional bytes by removing as many returns, spaces and tabs that you can from your front page. We use a maximum of 255 characters per line. Browsers seem to "gulp" this line length faster. So instead of this:
<TABLE>
<TR>
<TD BGCOLOR="#FFCC00" ALIGN=CENTER>
<A HREF="/r/ex"><B>Experts</B></A>
</TD>
</TR>
<TR>
<TD>
<A HREF="/3d/">3D</A><br>
<A HREF="/dlab/">Design</A><br>
...
do this:
<TABLE><TR><TD BGCOLOR="#FFCC00" ALIGN=CENTER><A HREF="/r/ex"><B>Experts</B></A></TD></TR>
<TR><TD><A HREF="/3d/">3D</A><br><A HREF="/dlab/">Design</A><br>
...
|
|
Revised: Mar. 16, 2001
Find a programming school near you