Friday, April 19, 2024

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…

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles