HTML Advanced: Tables : Page 11

Nesting tables within tables lets you create some complex effects from just basic HTML table tags. Nesting tables places one table inside of another. To nest a table, start the table as you normally would. When you come to the cell into which you want to place the nested table, enter the table data tag. Then, instead of typing the contents of the cell as you normally would, start the nested table. The table becomes that cell's content. After you end the nested table, be sure to end the table cell it is in with the <,/td> tag.

This table was built by nesting tables inside one another. We'll be the first to tell you it isn't a terribly attractive table, but it shows how you can place tables within tables.

This is another example of three nested tables. This table incorporates both images and text:

Aquarium Animals Fish Invertebrates Guppy Fancies Plain Snail Regular Large

Nesting tables can lead to complex tables -- which are both visually interesting and have the potential of introducing errors. One of the most common HTML errors is a missing or misplaced table tag.

If you are nesting tables, be sure to track your start and end table tags. Arrange your text file in a way that is as clear and easy to follow as possible, using comment lines as necessary. Remember, a comment line is a tag that starts with the <! --. character and ends with the -- > characters, like this:

<!-- THIS IS A COMMENT. IT WON'T DISPLAY-->