| Advanced HTML Features | |||||||||||
|
Tables, Frames and
Forms (Frames and Forms are not yet ready, check back soon!) | |||||||||||
|
On this page, we will talk about framing an image with a table,
spanning a row or column, and
side by side images and text.
Framing
Here is an example of
what I mean: | |||||||||||
| |||||||||||
| When putting a "frame" around an image, you must remember to put the ending table tags on the same line as the image tag. If you do not, you will get an image that is not centered within the table cell, like this: | |||||||||||
| |||||||||||
|
Do you see the difference between the two? The second has more
room around the right side and bottom of the image. That's one of the
most common problems poeple encounter when working with images. Ready
for some harder things? Two more attributes were added to the table tag for this framed imag: CELLSPACING and CELLPADDING. I gave this table a border of 5, a CELLSPACING of 10 and a CELLPADDING of 3. The cellspacing is the space immediately inside the border. The cellpadding is inside of that (the space around the image.) The cellspacing is actually connected to the border. You can see the difference here, where I have given the image on the left a cellspacing of zero and the cellpadding of 7, and the image on the right a cellspacing of 7 and a cellpadding of zero: | |||||||||||
|
| ||||||||||
|
It does not make a whole lot of difference, and you have to look real close to
see it. The image on the left has a thin gray line surrounding the image itself,
while the one on the right has the line where the border ends. Now if you go back
to the first image, you will see that thin grey line is in between the image and the
border. It is 10 "spaces" from the frame, and 3 "spaces" from the image. A
cellspacing of zero actually gives the border a small lip. Alright, say you have a real nice picture you want to put on your website, and you need a sophisticated border or frame for it. How about a triple frame? Here is an example: | |||||||||||
| |||||||||||
|
The code for something like that looks like this:
< TABLE BORDER=14 CELLSPACING=5 CELLPADDING=0 > | |||||||||||
| As you can see it is somewhat involved. Just remember, you are nesting the tables. Which is to say, you must have the three beginning table tags on one side of the image tag, and the three closing table tags on the otherside. | |||||||||||
|
Row and Column Spanning Did you notice that on this page, I have blocks of text or an image, and then two images, and then more blocks of text? Let me show you on a smaller scale what I mean by that: | |||||||||||
| |||||||||||
| Notice the first three and the last rows span (or extend across) the row with two images. If you do not tell the browser to span 2 columns, those rows will not do it, and you will end up with something like this: | |||||||||||
| |||||||||||
|
The coding you need for this is COLSPAN=2. This goes inside of the < TD > tag,
before or after the ALIGN attribute. The number can be changed to span the number
of columns you need spanned. The whole tag would look like this: < TD ALIGN=center COLSPAN=2 > And then there is ROWSPAN. This attribute spans rows, like in this example: | |||||||||||
| |||||||||||
| If you look at the top of this table, you will see that the two columns do not line up exactly. This is because I have not written the code properly. I have asked the browser to have this table's first column to span 4 rows, even though there are only 3 rows to span. I am not sure why I have to put in 4, I only know that when I put in 3, it only spans 2. Arrgh! I will keep looking for an answer to this, and will post it here soon. However, this is a general idea of how it works, and with a border of zero, the small discrepancy will not show. Below is the code I uesd for the above table (so anyone who knows what I am doing wrong, please email me.) | |||||||||||
|
< TABLE WIDTH=400 BORDER=1 > < TR >< TD ROWSPAN=4 ALIGN=center> An image here.< /TD >< /TR > < TR >< TD ALIGN=center > A block of text here.< /TD >< /TR > < TR >< TD ALIGN=center > An image here.< /TD >< /TR > < TR >< TD ALIGN=center > A block of text here.< /TD >< /TR > < /TABLE > | |||||||||||
|
Return to HTML-help page.
Copyright 6/18/1998 | |||||||||||
