Table Tutor - Lesson 5

Now we're going to play around a little. 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...

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 (&nbsp;) 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-->

General Table
of Contents
Lessons
Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7
Quick
Reference
Barebones
HTML Guide
PROFESSIONAL WEB DESIGN