Table inside table

[wizeman]

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

 

[MicrotechXP]

Nice tutorial! That will help a lot of people!

 

[Bryon]

You can also use the colspan and rowspan attributes to control tables even more.

Example:

<table width="200" align="right" border="1">
  <tr>
   <td colspan="2">Hows it going?</td>
   <td>Yes yes...</td>
 </tr>
 <tr>
   <td>ha</td>
   <td>ha</td>
   <td>ha</td>
 </tr>
</table>

This doesn't show with another table inside, but you could place a table anywheres between any "<td>" tags.

(Sorry, I just had to say that... )

 

[n4tec]

that is a Nice tutorial... i recommend it to Newbies..

 

[TranceOperator]

It is a good one for newbies, unfortunately it doesn't conform to the w3c standards...but who cares? They say that now with tables you have to include <TH> and all of this other new crap...just so your site will be combatible with a PDA web browser :grin: who cares...But yeah, tables inside tables I've been doing that for a long time, real useful.