Welcome back. In Part 1, I discussed how to speed up the loading of your HTML files by getting rid of extraneous code. This time around I'll focus on one of the worst culprits for fatty HTML, our good friend the table. As we all know, tables are wondrous for controlling overall page layout. Without them, our designs would be ... well ... prehistoric.
But using tables comes at a price. They generate a ridiculous amount of HTML code: TRs, TDs, ALIGNs, CELLPADDINGs, and on and on. Fortunately, there are ways to beat the system and minimize table code.
The first trick: Don't use tables unless they're absolutely necessary. I know that sounds obvious, but there are many sites that don't follow this simple rule of thumb. For example, if all you want to do is left-align an image and a caption on a page, there's no need to use a table at all. Also, just because some elements on a page are layed out using a table doesn't mean the whole page needs to be. Take a look at the following fake page:
(The gray lines represent text, and the colored rectangles are images.)
To create this page, you'd have to use an HTML table - at least for the columns of text. But you wouldn't need to put all the page elements within table cells. Shown below is the same page with table cells in red:
Note that the blue banner graphic at the top of the page doesn't need to be in the table, nor do the text line and yellow graphic at the bottom.
Now let's move on to liposuctioning all those extra table cells.
next page»
