Sunday, September 25, 2022

So, You Want A Table Inside A Table, Huh?

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 Table2nd 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.


           <TD>2nd Table</TD>
           <TD>2nd Table</TD>
           <TD>2nd Table</TD>
           <TD>2nd Table</TD>

<TD> The cell next to this one has a smaller table inside of it, a table inside a table.</TD>

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…

Popular Articles