| Now we're going to play
around a little.. try a few things just to see what will happen.
Here's a little unordered list:
Ingredients for Apple Pie
That's all fine & dandy, but what if we want to put it over
here... (Hey.. I'm not sure if these ingredients are needed
to make an apple pie. It's just an example!)
|
Ingredients for Apple Pie
|
Because we want it to be next to a picture of...
a pie!
 |
Ingredients for Apple Pie
|
We could use a table to do that!
When studying or building a table, it's always easier when the
borders are turned on.
|
Ingredients for Apple Pie
|
Let's build this one step at a time. It's really pretty
simple!
Start with Geetham.
<TABLE BORDER=3>
<TR>
<TD>Geetham</TD>
</TR>
</TABLE>
Replace Geetham with the unordered list.
<TABLE BORDER=3>
<TR>
<TD>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Ghee
</UL>
</TD>
</TR>
</TABLE>
| Ingredients for Apple Pie
|
Remember, in the absence of other instructions, the table will
make itself just big enough to contain the data. So in this
instance, a size attribute is not really needed.
Next we'll expand the table the full width of the browser
window.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Ghee
</UL>
</TD>
</TR>
</TABLE>
| Ingredients for Apple Pie
|
Isn't this fun!
Now we need to make a second cell. We want the left cell to be a
little smaller than the right one.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Ghee
</UL>
</TD>
</TR>
</TABLE>
| |
Ingredients for Apple Pie
|
Now would be a good time to copy applepie.gif to your
working folder.
Plug the image into the first cell.
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%><IMG SRC="applepie.gif"
WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Ghee
</UL>
</TD>
</TR>
</TABLE>
|
Ingredients for Apple Pie
|
All that's left is to align the pie image to the right side of
the cell and turn off the border attribute.
<TABLE BORDER=0
WIDTH=100%>
<TR>
<TD WIDTH=40% ALIGN=RIGHT><IMG
SRC="applepie.gif" WIDTH=150 HEIGHT=138></TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Ghee
</UL>
</TD>
</TR>
</TABLE>
|
Ingredients for Apple Pie
|
Isn't this cool??
<--BACK
NEXT-->
|
