|
|
 |
Welcome to Tom's Web |
On the last page we learned how to put images to the left. center and to the right. But the way we did it there can't be any text beside it which leaves BIG HOLES in our page. Wouldn't be nice to be able to put images and text any where we want? Well there is by using tables and we will start that next.
Now that's a little better by using the <table> tag we were able to put an image in the upper left corner and text to the right of it on the same line. The <table> has 6 parts and looks like this.
<table border="#" cellpadding="#" cellspacing="#" width="#" bordercolor="#" bgcolor="#">
table border="#"
is the width of the border around the table in pixels.
cellpadding="#"
is the space between the border and the image in pixels.
cellspacing="#"
is the space between the cells in pixels.
width="#"
is the width of the whole table in either pixels OR in percent of the page
with.
bordercolor="#"
is the color of the border.
bgcolor="#" >
is the color of the background in the table.
Now we have the
<tr> tag which is the table row tag there
will be a table row tag for every row you put in the table.
The table row tag is simple and looks kike this.
<tr>
Next we have the
<td> tag which is the table division tag
there will be a table division tag for each cell that you put in a TABLE ROW.
The table division tag is a little more completed and looks like this.
<td valign="?"
align="?"
width="#"
bgcolor="#">
The
<td is the start of the table division ( table
cell).
The valign="?"
is how you want what ever you put in the table division (cell) aligned vertically.
And can be Top, Middle, Baseline, or bottom.
The
align="?" is how you want to alien what
ever you put in the cell horizontally and can be Left, Center, or Right .
The
width="#" is the with of the cell and
can be in percent or number of pixels.
The bgcolor="#">
is the color of the background you want the
background of the cell to be. And can be any thing from "#000000"
to "#FFFFFF".
Then we have the </td> which is the table division ends tag.
If we have more than one cell in the same table row then we will have to repeat the hole table division for each cell in the row (The table at the top of the page has one row and two divisions.)
Now we have the </tr> which is the table row ends tag there is one at the end of each row we put in the table.
If we have more than one row in the table we have to repeat the hope table row, table division sequence for each row we have in the table.
Now we come to the </table> tag which marks the end of the table.
If you think this is complicated wait until we start putting tables. But more on that later.
There is one more tag that can be put inside the table and table division tags it is the same one we used in the body tag to put in the background it is background="What ever image".
Yes we can use a different image as a background in each cell and still Type in text over it or even put another image over it ! Won't that help make an interesting web page ?
The coding for the table at the top of this page looks this see if you can understand it.
<table border="8" cellpadding="5" cellspacing="6" width="100%" bordercolor="#0000FF" bgcolor="#FFFF00"> <tr> <td width="89" bgcolor="#000000"><img border="8" src="trailgif1r.gif" width="89" height="75"></td>
<td valign="top" align="center" width="468" bgcolor="#000000"><b><font color="#FF0000" face="Copperplate Gothic Bold" size="6">Welcometo Tom's Web</font></b></td>
</tr> </table>Any of these variables that you want to set to "0" you can leave out of the tag entirely.
Next we will make a page using this information.