Here's a quick example of a table within a table, with cellpadding, cellspacing and the table border set so you can easily see what's going on within the table:
| 2nd Table |
2nd Table |
| 2nd Table |
2nd Table |
|
The cell next to this one has a smaller table inside of it, a table inside a table. |
How It's Done
Below is the code that created the table above. I have left the text black. The outer table's commands are purple and the inner table's commands are red so you can quickly tell them apart.
<TABLE BORDER="3" CELLPADDING="10" CELLSPACING="10">
<TD>
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3">
<TD>2nd Table</TD>
<TD>2nd Table</TD>
<TR>
<TD>2nd Table</TD>
<TD>2nd Table</TD>
</TR>
</TABLE>
</TD>
<TD> The cell next to this one has a smaller table inside of it, a table inside a table.</TD>
</TABLE>
How It's Done
First off, you should really know how to do a simple table before attempting to tackle this monster. See my
table tutorial first. Then this will make a lot more sense.
Now, for those of you already up to speed on tables, you can probably pick it up from the code how it's done. You simply make a point of ending every line with an end command. When you do a simple table, you really only need one </TR> and one </TD> command at the end of the table. But here, you need to end every line with its own </TD> and each <TR> with its own </TR>.
A Tip
When I do a table in a table, I tend to get a little confused on what goes with what. I create all the tables separately, making sure every section has its own end command. I create the tables that will go in the cells first. The last thing I make is the larger table. That way, I can create the large table and when I need to fill in the <TD> with a smaller table, I can just cut and paste it in. It also helps me to remember to follow the smaller table with a </TD> for the larger table's benefit. It's super easy to forget one and that can mess up the whole table scheme.
Hope this helps...
IE 7
Firefox 2.0
