Create Nested Tables

Welcome to our HTML help page!

Home | HTML-Index | Basic HTML | HTML Structure

CREATE NESTED TABLES

Nesting a table within another table allows you to create more complex table layouts.

To nest a table, you first create the main table, leaving the cell you want to contain the nested table empty. You can then nest a table by creating a new table in the empty cell.

When creating the tables, make sure you include all the end tags </TH>, </TD>, </TR> and </TABLE> for both the main table and the nested table. Forgetting to include an end tag may adversely affect the layout of the tables.

You can format nested tables as you would format any other table. For example you may want to add color to a nested table as shown here.

EXAMPLE

Type this:
down

<TABLE BORDER=3 CELLPADDING=5 ALIGN=CENTER>
<TR>
<TH ALIGN=CENTER>Product Name</TH>
<TH ALIGN=CENTER>Price Per Unit</TH>
<TH ALIGN=CENTER>Units Available</TH>
</TR>
<TR> <TD ALIGN=CENTER>
        <TABLE BORDER=1>
        <TR>
        <TD>Blue silk blouse-long sleeved</TD>
        </TR>
        <TR>
        <TD>Red silk blouse-long sleeved</TD>
        </TR>
        <TR>
        <TD>Black silk blouse-long sleeved</TD>
        </TR>
        </TABLE>
</TD>
<TD ALIGN=CENTER>$39.99</TD>
<TD ALIGN=CENTER>120</TD>
</TR>
<TR>
<TD ALIGN=CENTER>Pants</TD>
<TD ALIGN=CENTER>$29.99</TD>
<TD ALIGN=CENTER>200</TD>
</TR>
</TABLE>

And you get the following:
down

Product Name

Price Per Unit

Units Available

Blue silk blouse-long sleeved

Red silk blouse-long sleeved

Black silk blouse-long sleeved

$39.99

120

Pants

$29.99

200

My home page
Back to Top