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!

<< BACK         NEXT >>