Exit tutorial


HTML Tutorial
Advanced Web Design: Tables - Page 3 of 5
Nesting One Table Inside Another

Well, suppose you had this problem: You need to put two tables on the same line on your page. Oh no, the table tag automatically sends you to the next line! Well, you can get around this by placing your two tables inside one large table, thus keeping them on the same line.

Let's start out by just placing one table inside another. Here is the code:

<TABLE width="400" border="6"> <!---starts the big table--->
<TD align="center"> <!---starts the first cell of the big table--->
<TABLE width="300" border="2"> <!---uses another table as the cell data for the big table-->
<TD align="center"> <!---starts the small table inside--->
I'm inside the small table! <!---the contents of the first cell of the small inside table--->
</TD> <!---ends the table cell of the small inside table--->
</TABLE> <!---ends the small inside table--->
</TD> <!---ends the cell of the big table which contained the small table--->
</TABLE> <!---ends the big table--->

Here is what you get from the code above:

I'm inside the small table!

This can get a bit confusing at times. Just remember to keep track of which table you are in while you are writing the code, those td tags get me everytime........

As for the problem at the beginning of the section, all we have to do is add another table cell to the big table, and then use a second smaller table inside that cell. To hide the appearance of the big table, we set the border on the big table to zero. Here is the example:

<TABLE width="600" border="0">
<TD align="center">
      <TABLE width="275" border="4">
      <TD align="center">
      I'm in the first small table! Ha!
      </TD>
      </TABLE>
</TD>
<TD align="center">
      <TABLE width="275" border="4">
      <TD align="center">
      I'm in the second small table! Ha, ha!
      </TD>
      </TABLE>
</TD>
</TABLE>

And now we see the two inside tables on the page side by side:

I'm in the first small table! Ha!
I'm in the second small table! Ha, ha!

Of course, you can make the inside tables or the outside tables as complicated as you want. Add all the cells and rows you can handle.....you can go table crazy if you want to. One work of warning. The larger and more complicated your structures become, the larger and slower to load your page sizes will become.

[Back to the Stage 3 Index]