Convert Table Layouts to CSS Layouts to Speed Up Web Pages

Using CSS to lay out your page can save you a significant amount of markup, typically 25% to 50%.¹ First look at the layout to see whether you can substitute CSS lists and positioned divs to simulate the effects that are typically done with tables. Next, strip down the content to structural markup and build it back up again using CSS style and positioning. Then test the new layout with different browsers. We recommend using BrowserCam to quickly test your new CSS layout on different browsers (see the image below, "BrowserCam.com renders web pages on different browsers").

BrowserCam.com renders web pages on different browsers



CSS page layout

You can use CSS to position your entire layout or to format smaller sections of your web pages. We often see tables used to format pages when CSS could have been used more efficiently. You can create multicolumn layouts using CSS floats and margins applied to divs (http://alistapart.com/topics/code/css/). You can make complex hierarchical menus by using lists controlled by CSS, not lists controlled by Javascript as is usually the case, as described in More Eric Meyer on CSS. You can create simple rollover effects using CSS, with and without graphics. For examples of CSS rollover effects and menu conversion, see Chapter 7, CSS Optimization, of Website Optimization.

[1] According to Jeffrey Zeldman's Designing with Web Standards (New Riders), converting to CSS layout typically saves from 25% to 50% off XHTML file size, and a net savings overall. We've found similar results in our conversions.