HTMLisEasy.com
HTML tutorials for the rest of us...

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!

applepie.gif Ingredients for Apple Pie
  • Apples
  • Flour
  • Sugar
  • Cinnamon

By gosh and 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.

Isn't this fun!

<< BACK NEXT >>
Table Tutor
Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
Tables Quick Reference
HTML 4.0 Reference      Barebones HTML Guide