Drew's Web Design Site: nesting tables

Something that occasionally confuses those who are new to the technique is the nesting of tables inside each other. In other words, a table cell (<td> tag) that itself contains a table. This is no more complicated than any other example of nesting, such as links within paragraphs, or the whole page content within the <body> tag, but I think what makes it hard for some people to grasp is the need to keep a very close eye on your table structures, and ensuring you have closed all tags in the correct order.

Why might you want to nest tables? Well, at a simple level, it can help you achieve effects like this. The HTML used to get this effect follows beneath:

Rome was the greatest empire of the ancient world. However, what is often forgotten is that the Emperors did not come to power until after a long period of broadly democratic government by the Senate. The table on the right lists four early Emperors of Rome.

27 BC: Augustus

14 AD: Tiberius

37 AD: Caligula

41 AD: Claudius

<table summary="Some Emperors of Rome" style="width: 75%;">
<tr>
<td style="width: 50%; padding: 10px;">
<p>Rome was the greatest...</p>
</td>
<td>

    <table style="border-style: solid; border: 1px; border-color: #003300">
    <tr><td><p>27 BC: Augustus</p></td></tr>
    <tr><td><p>14 AD: Tiberius</p></td></tr>
    <tr><td><p>37 AD: Caligula</p></td></tr>
    <tr><td><p>41 AD: Claudius</p></td></tr>
    </table>

</td>
</tr>
</table>

Hopefully the indentations here make the structure clear. It really is just a matter of keeping track of your opening and closing tags. Note that the attributes applied to the first "parent" table don't apply to the "child" table within it. So there's no padding between the cells of the "child", for instance. More obviously, the same applies the other way, so there is no border round the "parent".

You can also do this kind of thing with rowspan and colspan attributes: in this case this would be a 4-row table with the first cell on the first row including rowspan="4". Each of the other three rows would have only the second tag in it ("Tiberius", etc.). However, any more complex than this and nesting is a lot easier. This particularly applies when you remember that this whole page is in fact laid out using a table and the "child" table is in fact a "grandchild". Here is a link to the page with more information about using tables to lay out whole pages.

Web Design

nesting tables

main menus

help pages