HTML and CSS Reference
In-Depth Information
Employ spacer GIFs
Why use spacer GIFs?
GIF graphics can be used as spacers to stretch table cells to an
exact width. If they're transparent, they remain invisible regardless of
the cell's background color.
A spacer GIF is used in the exercise below. It keeps the width of the
left-hand cell constant, regardless of the size or resolution of the
screen used to view it.
1.
Go to:
www.visibooks.com/books/html/advlayout/pics
and save
spacer.gif
in the
graphics
folder.
2.
In
advlayout.html
, below the two tables, insert a third table just
like the first table.
3.
Insert
spacer.gif
in the left-hand cell.
Give it a
width
of
100
and
height
of
1
.
<td bgcolor="#000099" width="10%">
<img src="graphics/spacer.gif"
width="100"
height="1"
>
</td>
Tip:
Most spacer GIFs are 1x1 pixel, which load very quickly
online. This one started out as 50x50 to make it easier to see
and save.
