Website Workshop: HTML


 

Color
Alignment
Link Color and Underlining
Whitespace is your friend!
Download time is important
Make the structure of your site clear!
Writing Text for the Web

Display: Get the Look You Want

1) Single-pixel GIFs
The single-pixel GIF is the brick of your web palace. You can build almost anything and have it look the same on different browsers. With the single-pixel GIF you can exactly determine the dimensions of your site....to the pixel!

Why am I bringing this up? Because I corrected hundreds of empty table cells in V6. Not only empty, but sometimes even missing closing tags. The reason that these were put in is because the developer wanted to create some space in the display, a line break, some whitespace, whatever. But you can't leave a table cell empty! So I'll show you what to do minimally to avoid this, and then I'll show you what you CAN do if you like with this versatile tool.

As I said above, table cells should never be left empty. At minimum, they should be filled with a non-breaking space. Ideally, they should be filled with a clear single-pixel GIF with the desired height and width specified. Insert this image with whatever size space you want to appear on the page in all browsers and operating systems. Using single-pixel clear gifs helps enormously in producing a consistently formatted page that looks the same for all users.

If left empty (or even sometimes when filled with a non-breaking space) table cells can have unpredictable heights and widths. For example, if you use a non-breaking space to fill an empty table cell in order to provide spacing between rows on a page, you will most often get a larger space than you really want, perhaps a space of 20 pixels or more.

If, on the other hand, you use a single-pixel GIF with height="5" to fill that same table cell, then you will actually get a space of 5 pixels in that row, not more and not less. For consistent results across browsers and platforms, use a single-pixel GIF to fill table cells.

Incorrect: <tr>
<td></td>
</tr>
 
Better, but not precise: <tr>
<td>&nbsp;</td>
</tr>
 
Best, allows for very precise spacing: <tr>
<td><img src="/art/pxl/clear.gif" height="5" width="15"></td>
</tr>


 
 
Back to Homepage