Example: Replacing Tables and Transparent Images with CSS

This is a simplified example of a navigation menu found on the website of an academic institution:

We've taken this example and produced an identical low bandwidth version:

The layout of the first example was achieved using a table and scaled transparent images to space out the text in the menu. The table and images make up a large bulk of the HTML:

<table width="580" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#ebeadc">
<a href="#academics"><img src="spacer.gif" border=0 height=14 width=10>Academics</a>
<a href="#admissions"><img src="spacer.gif" border=0 height=14 width=10>Admissions</a>
<a href="#library"><img src="spacer.gif" border=0 height=14 width=10>Library</a>
<a href="#directory"><img src="spacer.gif" border=0 height=14 width=10>Directory</a>
<a href="#administration"><img src="spacer.gif" border=0 height=14 width=10>Administration</a>
<a href="#alumni"><img src="spacer.gif" border=0 height=14 width=10>Alumni</a>
<a href="#computing"><img src="spacer.gif" border=0 height=14 width=10>Computing</a>
</td>
</tr>
</table>

The markup can be simplified by replacing the table with an unordered list as follows:

<ul class="navigation">
<li><a href="#academics">Academics</a>
<li><a href="#admissions">Admissions</a>
<li><a href="#library">Library</a>
<li><a href="#directory">Directory</a>
<li><a href="#administration">Administration</a>
<li><a href="#alumni">Alumni</a>
<li><a href="#computing">Computing</a>
</ul>

and styled appropriately:

.navigation {
  background-color: #ebeadc;
}

ul.navigation { 
  list-style-type:none;
  padding-left:0;
  width:684px;
  margin: 0 auto 0 auto;
}

.navigation li {
display:inline;
padding:0;
}

.navigation li a { 
padding: 0 0 0 10px;
}

This reduces the size of the HTML from 724 to 305 bytes, a saving of more than 50%. The additional data in the style sheet is 238 bytes, but this can be cached and shared between pages, so the average cost is lower.

If you already had a style sheet in the page and you eliminated the use of transparent images entirely, you could save one HTTP request (and one round trip's delay) as well.