HTML Tables (Nested-Simple)

Author: * Laurels Curius - 12 Posts on this thread out of 2,713 Posts sitewide.
Date: Jul 21, 2004 - 10:47

BASIC NESTED TABLES
The following is an example of a nested table. It is a simple one cell (or <td>) table, with the nested one centered inside of the one cell. The outer table(we'll call it table #1) is in dark blue, and the nested table (table #2) within is in ivory.

2nd Table	2nd Table
2nd Table	2nd Table

The following is the coding I use for the above table:

<TABLE BORDER="3" CELLPADDING="10" CELLSPACING="10" WIDTH="40%" ALIGN="CENTER" BGCOLOR="#000080">
<TR> <TD>

<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3" BGCOLOR="FFFFFF" ALIGN="center" WIDTH="50%">
<TR>
<TD><FONT COLOR="#000080">2nd Table</FONT></TD>
<TD><FONT COLOR="#000080">2nd Table</FONT></TD>
</TR> <TR>
<TD><FONT COLOR="#000080">2nd Table</FONT></TD>
<TD><FONT COLOR="#000080">2nd Table</FONT></TD>
</TR>
</TABLE>
</TD> </TR>
</TABLE>

With the two table codes seperated by color; with the outer table in navy, and the nested table in red, you can see that the nested table goes into a cell, or <td>. Which one (if more than one <td>) is up to you and your ideas for table layout.

Well that's nice, but how about adding some style to it?

We'll add some style to the above nested tables by changing the background and borders a bit. Table #1 is in deep purple, and Table #2 is in a lighter blue. For more on how to change border colors and backgrounds, please see the previous tutorial Basic Tables.

This is the Nested Table
Nested Table content
This table only has one cell or <td>

The following is the coding I use for the above table:

<table border="3" cellpadding="10" cellspacing="0" width="60%" align="center" bgcolor="#000080" bordercolorlight="#AA97BA" bordercolordark="#4E3D5C" bordercolor="#333149" background="/aworlds_media/ibase_1/00/03/23/00032368_000.jpg"> <tr><td><BR><BR>

<table border="3" cellpadding="10" cellspacing="0" width="80%" align="center" bgcolor="#666699" bordercolorlight="#545077" bordercolordark="#333149" bordercolor="#333149" background="/aworlds_media/ibase_1/00/03/28/00032832_000.jpg"> <tr><td> <em>This is the Nested Table</em>&Nested Table content<p>This table only has one cell or <td> </td></tr></table><br><br>
</td></tr></table>

What if I want something else inside table #1 other than just the nested table?

The following table is the same as table #1, but has a second cell to the side of the nested table. Once again, table #1 will be in dark blue, and the nested table#2 will be in ivory.

2nd Table	2nd Table
2nd Table	2nd Table

This table has two cells, with this one being text and the other containing the nested table.

The following is the coding for the above table:

<TABLE BORDER="3" CELLPADDING="10" CELLSPACING="10" WIDTH="60%" ALIGN="CENTER" BGCOLOR="#000080">
<TD>
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3" BGCOLOR="#FFFFF0">
<TR>
<TD><FONT COLOR="#000080">2nd Table</FONT></TD>
<TD><FONT COLOR="#000080">2nd Table</FONT></TD>
</TR> <TR>
<TD><FONT COLOR="#000080">2nd Table</FONT></TD>
<TD><FONT COLOR="#000080">2nd Table</FONT></TD>
</TR>
</TABLE>
</TD>
<TD>
This table has two cells, with this one being text and the other containing the nested table.
</TD> </TR>
</TABLE>

There are plenty of ways to customize simple nested tables; using images, different fonts and colors, borders etc. I suggest you play around with them with the different attribute commands to get something personalized.

In the next segment, we will go over how to use nested tables to create top bordered web pages, to be submitted when I have found some suitable webspace to host the examples at.