Earlier in
the tutorial, you learned how to align text and images on the page. You
basically had three choices: Left, Right and Center.
Here is where tables come to the rescue. Tables allow you to place either
images or text inside a table cell. You can use these table cells as
an invisible grid. How ? By a very simple trick, turn the tables borders
off <table border="0">.
Here is a simple example:
Here
is the HTML for this table:
<table
width="360" border="0" cellspacing="0"
cellpadding="0" bgcolor="#CCCC99" align="center">
<tr>
<td colspan="3"><img src="cat-title.gif"
width="350" height="50" hspace="10"></td>
</tr>
<tr>
<td width="218"><img src="lion2.jpg"
width="198" height="181" hspace="20"
vspace="20"></td>
<td width="103" valign="top"><img src="kitty.gif"
width="103" height="181" vspace="20"></td>
<td width="34" valign="top"><img src="clear-gif.gif"
width="30" height="1"></td>
</tr>
</table> |
Lets
look at the table step by step.
The Table Tag. The <table> </table>
tag indicates that the table is 360 pixels wide and has no cell padding
or spacing. If you are not familiar with cell padding or spacing please
review page 6 of this HTML tutorial.
The table has the olive colored background indicated by the color #cccc99.
The table is centered on the page.
The Table has Two Rows. This is indicated by the two pairs of
<tr></tr> tags.
The First Row. There is only one cell in the first row indicated
by the single <td></td> pair. This cell has a width of three
columns indicated by colspan="3". This cell contains the image
for the "My Big Kitty" text.
The Second Row. The second row contains three cells. This is
indicated by the three <td></td> pairs. Each cell contains
an image. The first cell contains the lion image. The second cell contains
the text image for "Don't be Fooled...", the third cell contains
a mystery image called clear-gif.gif . This will be explain shortly.
Single Pixel Gif Trick. The Netscape Browser has an unfortunate
habit of collapsing table cells that are empty, even if you specify an
exact width. In order to get around this, you use what David Seigel
coined, "the single pixel gif trick". Remember how I said
you should never let the browser "scale" an image for you,
that you should always pre-size images your image editing program? Well,
this is the one exception to that rule. Take a 1x1 pixel clear image
and scale it horizontally to the desired width of the table cell. The
image will "fill" the cell to that width. Thats it ! This
is a very powerful trick! It allows you to space things in tables to
any width or height you want. There is one down side, your computer
does some calculations every time you scale an image. So, even though
the image size of a 1 pixel gif is tiny, scale 50 of them could delay
loading of your page. So don't get too carried away.
You can create a 1x1 clear image in you image editing program (or grab
it from this page by right clicking here: 
And selecting "save picture as" from the pop up menu. It is
scaled to 10x10 pixels to make it easier for you to grab).
HSPACE and VSPACE tags. These attributes of the <img> tag
specify the amount of space to leave around each side of the image in
pixels. HSPACE specifies the horizontal space and VSPACE specifies the
vertical spacing. In the table above vspace="20" means that
the image will have 20 pixels on the top and bottom of the image. Likewise,
hspace="20" means that the image will have 20 pixels of space
on the left and 20 pixels on the right of the image.
A Word About the Text: You probably were wondering why the text
was rendered as an image. The reason is simple. Basic HTML offers very
little control over the absolute appearance of text. If you want to
use anything other than the basic type faces such as Times Roman or
Arial or Verdana, then you need to turn the text into images. This should
be reserved for titles or emphasis since rendering all of your text
as images will make for slow loading pages.
The
next section of the HTML Tutorial will show you how to create HTML forms.
HTML Forms add interaction to your web pages.
 Previous:
Table Basics Next:
Forms 
|
