Intermediate HTML Tutorial: Nesting Tables

Home > Build > Programming > HTML > Intermediate HTML Tutorial

2.6 Nesting Tables

Tables can easily be placed within tables. This can make it easier to layout certain elements without having to do a lot of spanning. The drawback to this technique is it takes browsers longer to render nested tables.

To nest a table, simply start a new <TABLE> within the existing table. For this example, we'll use a 2 column, 1 row, 600 pixel wide and 300 pixel tall table:

<TABLE WIDTH="600" HEIGHT="300" BORDER="1">
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
</TR>
</TABLE>

Now we have a simple table. Let's place a graphic in the left cell and a table list in the right cell. Now the table is no longer that simple.

<TABLE WIDTH="600" HEIGHT="300" BORDER="1">
<TR>
<TD VALIGN="middle" ALIGN="center" WIDTH="300">
<IMG SRC="w3nation.gif">
</TD>
<TD VALIGN="middle" WIDTH="300">

This is the second cell. This is where we need to nest our table. We place the <TABLE> tag within the <TD> cell.

<TABLE WIDTH="100%" BORDER="1">

Below are a bunch of <TD>s and <TR>s from the nested table which are omitted.

</TABLE>
</TD>
</TR>
</TABLE>

See it in the Browser

2.5 COLSPAN and ROWSPAN

Tutorial Index

2.7 Cellpadding and Cellspacing