Web Design Tutorials and Lessons: Nested HTML Tables

Stay at Home and Learn

Web Design Tutorials

Computer Tutorials List

Nested HTML Tables

Tables can be quite effective when you nest one inside the other. Click the link below to see an example of a nested table (though Netscape users may not see the full effect).

An Example of a Nested Table

To create this web page for yourself, do this:

Create a new page in your HTML Editor
Repeat the steps from the Using images in tables section a few pages back
You might have something like this:

</TABLE>
</CENTER>

To nest a table, you need to insert a new TABLE inside one of the TD Tags. In other words, instead of having text or an image or a link in the Table Data tag, you're putting a new table in there.

So click in between the two <TD> tags of your table (where the <BR> tag is above, which you can delete)
From the menu bar, click Add > Add a Table
From the table dialogue box, set the Number of Rows to 1 and the Number of Columns to 1
Click OK, and your code will look like this:

<TR>

<TD>

<TABLE BGCOLOUR = White>
<TR>
<TD></TD>
</TR>
</TABLE>

</TD>

</TR>

</TABLE>
</CENTER>

Notice where the nested table has gone - in between two <TD> tags. A white background colour has been added to the new TABLE tag, and our new nested table also has one row and one cell in the row.

Add some text in between the new TD tags:

<TABLE BGCOLOUR = White>
<TR>
<TD><B>This table with the white background has been nested inside the one with the patterned background</B></TD>
</TR>
</TABLE>

Save your work, and then view the results in a browser. You should have something similar to the one in the link above.

We've covered quite a lot of ground in this Tables section, and there's a lot to remember. But there's no doubt about it - tables are an essential tool for budding and professional web designers; they are worth getting the hang of.

In the next section of the course, we'll study HTML Forms.

<-- Back One Page Move on to the Next Section -->

<--Back to the Web Design Contents Page

View all our Home Study Computer Courses