dcsimg

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

By Joe Burns

WEBINAR:
On-Demand

Application Security Testing: An Integral Part of DevOps


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.

    By submitting your information, you agree that htmlgoodies.com may send you HTMLGOODIES offers via email, phone and text message, as well as email offers about other products and services that HTMLGOODIES believes may be of interest to you. HTMLGOODIES will process your information in accordance with the Quinstreet Privacy Policy.

  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date