Code: Convert spacer cells

From Chapter 6: Web Page Optimization

A common practice is to use spacer cells with a single-pixel GIF that is stretched to enforce the spacing distance. Here is an example from Nasa.gov:

<!-- Empty spacer row -->
<table><tr>
<td colspan="2" width="223"><img border="0" alt="" height="10" width="223" src="/
images/common/spacer.gif"></td>
</tr>

Even rocket scientists can use some help with their HTML. A better way would be to use CSS to add spacing between cells:

<style type="text/css"><!--
    .vmargin {margin-top:10px;} --></style></head><body>
<table><tr>
<td colspan="2" width="223" class="vmargin">Content goes here</td>
</tr>

Even better is to use relative "em" spacing to allow for changes in font size made by the user and div elements:

<style type="text/css"><!--
    .vmargin {margin-top:1em;} --></style></head><body>
<div class="vmargin">Content goes here</div>