Lesson 6

Nested Tables, Part 1

The idea of nested tables is very simple. We already know you can put anything you want in a table cell. That includes another table. A nested table is just a table inside a table, like so:
<table><tr><td>
 <!-- nested table goes here -->
</td></tr></table>

"Why would I want to do that, Gnubee?"

1) You might have a complex table with different numbers of cells in each row. You can usually write this type of table with colspan and/or rowspan, but sometimes the only way is to make a separate table for each row.

2) Tables that have different size shapes next to or on top of each other, such as in table art, require nested tables. (We'll talk about that more when we get to gradcolor tables.)

3) You need nested tables to put multiple frames around an image. Our table below uses this technique, 3 frames around an image.

I have an image of a chimp and I want a 3-color frame around it. To get my 3 colors, I put the image in a table that is inside a table that is inside a table:
<table bgcolor="color1" cellspacing="?">
<tr><td>
 <table bgcolor="color2" cellspacing="?">
 <tr><td>
  <table bgcolor="color3" cellspacing="?">
  <tr><td>
  Image goes here
  </td></tr></table>
 </td></tr></table>
</td></tr></table>

Since the image is black & white, I chose shades of gray for my colors. I'm using cellspacing to determine the size of my frames. You could use border="?" instead of cellspacing, but pc's will only see gray. You could also use background="image.gif" instead of bgcolors. This would allow you to have a frame made of wood or marble or whatever you like.

Visit Gnubee's Gnus to see an example of a whole page that uses this technique.

As always, questions and comments are welcome.

Once again:
I love tables!
Tables are my friend!
I am the mighty creator!

Happy tabling!
Gnubee

Sample Table

Table Code

This code is indented and separated for easy reading. You don't need to do this when you write your tables. <table align="center" bgcolor="#222222" cellspacing="12"><tr><td>  <table align="center" bgcolor="#888888"  cellspacing="12"><tr><td>   <table align="center" bgcolor="#555555"   cellspacing="12"><tr><td>   <img src="chimpy.gif">   </td></tr></table>  </td></tr></table> </td></tr></table>

Homework Assignment

• Put a table inside a table
• Use some bgcolors and/or backgrounds in your table tags
• Use cellspacing to make the bgcolors (backgrounds) show up
• Post your table and show your code