hitmill.com
link to hitmill.com home page

 

 

HTML Table Tutorial: Nesting Tables


 

Nesting tables simply means making a table inside another table. Since only the TH and TD tags can hold data you will have to code a full table inside the TH or TD tag of another table. Hint: Code the first table completely then between the <TD> and the </TD> tags (or between the pair of TH tags) code another another table. The second table must begin and end in the same cell.

This table is nested inside the purple table
   

 

To again illustrate nested tables I will make 3 tables nested together, all inside an outer red table. Study the source code to see that I indent the code to keep the tables sorted, to make it easier to debug or edit, and to make it easier to know what I am in the table structures. Another trick is to alternate capital and lowercase letters in the code of each successive table. If you use Microsoft Internet Explorer, Click on View, Source to see the source code for the following nested tables.

Table 4 was coded last.

 

When coding nested tables it will be easier to read your own code if you slightly indent the code when moving from one table to another in the nesting structure, then reverse the indenting as you close the tables so that each table can line up with itself when the code is viewed on the page. (See below, I have tried to slightly indent the code for each table.)


 
<CODE>
<TABLE ALIGN="center" BORDER="0" CELLSPACING="0"
WIDTH="400" HEIGHT="400" BGCOLOR="red">
<TR VALIGN="middle">
<TD>
 <!-- code yellow table before adding another -->
 <table align="center" border="0" cellspacing="0"
 width="300" height="300" bgcolor="yellow">
 <tr valign="middle">
 <td>
    <!-- code green table before adding another -->
    <TABLE ALIGN="center" BORDER="0"
    CELLSPACING="0" WIDTH="200" HEIGHT="200" BGCOLOR="green">
    <TR>
    <TH VALIGN="middle">
      <!-- OK to use a TH cell instead of TD cell -->
      <!-- inner table is coded last -->
      <table align="center" border="0"
      cellspacing="0" width="100" height="100"
      bgcolor="ivory">
      <tr valign="middle">
      <td><div align="center"><
      </div>
      </td>
      </tr>
      </table>
    </TH>
    </TR>
    </TABLE>
  </td>
  </tr>
  </table>
 </TD>
 </TR>
 </TABLE>
<br> <br>
</CODE>

 

 

You will notice from the source code that I followed a system of indenting each table. This makes it easier to troubleshoot my code if there is an error. Indention of table code also makes it easier to maintain the page, and make future editing changes. If the table structures become complicated or multiple columns are needed remember to use HTML comments to guide you, remind you of the column you are coding data into. On some of my opening or closing TD tags, I often comment: This begins column 2, or, this ends column 2 and that way, there is no doubt that everything between the comments is in column 2.

The best way to learn code tables is by doing it. I like to draw a picture first of a complicated table and write the table tags on the picture, then use the picture like a "blueprint" to follow when coding. See the Table tutorial if you'd like a quick review of the table tags and attributes. Start practicing your table coding.

If you have errors, print out the code and use colored pens or markers so each table can be marked a different color. You may quickly notice your error on the printed paper much faster than trying to troubleshoot using only a text editor. Have fun, and enjoy the challenge of learning to do nested tables.


 

 

 
Contact
 
Updated 11 April 2006
© hitmill.com
All Rights Reserved