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

By Joe Burns

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



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •