Now we're going to play around a little. Here's a little unordered list:

Ingredients for Apple Pie

• Apples
• Flour
• Sugar
• Cinnamon

That's all fine & dandy, but what if we want to put it over here...

Ingredients for Apple Pie Apples Flour Sugar Cinnamon

Because we want it to be next to a picture of...     a pie!

Ingredients for Apple Pie Apples Flour Sugar Cinnamon

By golly 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 Apples Flour Sugar Cinnamon

Let's build this thing one step at a time. It's really pretty simple!

Start with little Ed.

<TABLE BORDER=3>
<TR>
<TD>Ed</TD>
</TR>
</TABLE>

Ed

Replace Ed with the unordered list.

<TABLE BORDER=3>
<TR>
<TD>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie Apples Flour Sugar Cinnamon

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 needed to accomodate the list. The table simply expands to the proper size.

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>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie Apples Flour Sugar Cinnamon

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%>&nbsp;</TD>
<TD WIDTH=60%>
Ingredients for Apple Pie
<UL>
<LI>Apples
<LI>Flour
<LI>Sugar
<LI>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie Apples Flour Sugar Cinnamon

As a matter of habit, you should always place a blank space ( ) in any empty cell.

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>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie Apples Flour Sugar Cinnamon

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>Cinnamon
</UL>
</TD>
</TR>
</TABLE>

Ingredients for Apple Pie Apples Flour Sugar Cinnamon

Bingo!

<--BACK        NEXT-->