PageResource.com - Web Development Tutorials

Tables within Tables

Placing tables inside a larger table
Note: Many of these effects can now be achieved using Cascading Style Sheets.

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="75%" border="6"> <!-- starts the big table -->
<td align="center"> <!-- starts the first cell of the big table -->
<table width="75%" border="2"> <!-- we use 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.

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="75%" border="0">
<td align="center">
      <table width="99%" border="4">
      <td align="center">
      I'm in the first small table! ha!
      </td>
      </table>
</td>
<td align="center">
      <table width="99%" 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.

Well, that does it for this section, let's go on to the next section where you will learn the technique of Using Frames.


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy