Table Tutor- Lesson 5

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

- 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 puppy 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 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>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%></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

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 Index | Barebones HTML Guide
PROFESSIONAL WEB DESIGN