Resources

Nesting HTML Tables

"What on earth is nesting?" may be the first thing that you ask. Well, the way I would describe it is placing something within something else. "something else" acts as the container of "something". with me? When you nest tables, the 'nested' table is contained within another table, which contains it. This is quite useful for creating table based layouts.

Usually, tables are positioned relatively. They are supported by many, if not all web browsers that exist. (With perhaps the exception of Lynx!) Control over positioning within tables is quite poor, you only have align and valign to position bits and pieces, so you are constrained to certain places.

Hence, nested tables. This technique means that tables can be placed within tables. Tables could then be placed within those tables, which would create a 3rd level of nesting, but at this point we won't go into anymore complexity than is necessary.

Lets say you have a page and you would like a navigational part on the left with content on the right. You dont want to use frames, and layers are too fiddly. A good way to create this kind of effect is by using nested tables. A table which contains 2 other tables, one of the 2 inner tables would be quite narrow and on the left (for the navigation) and then the other table on the right with the majority of the page space available to it. (content)

The example below indicates this

Create a new HTML file & paste the following between your <body> & </body> tags.

<table width="500" cellspacing="2" border="1">
<tr>
<td><div align="left"><b>The containing table</b></div>

<table width="120" cellspacing="2" cellpadding="2" align="left" border="1">
<tr>
<td>A nested table</td>
</tr>
</table>
<table width="380" cellspacing="2" cellpadding="2" align="right" border="1">
<tr>
<td>Another nested table</td>
</tr>
</table>

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

This will produce something a little like this...:

Still double dutch? - this is what the above actually is. The containing table is the code in red. Its a table 500 pixels in width. Its opened and closed the same way BUT, as you can see, within the table data cell (<td>) it contains 2 other tables. The containing table encompasses those two tables. The nested tables are coded just as a bog standard table is.

As you can imagine, this can get pretty complex as layouts become heavily nested. It is best not to nest many tables too deeply within a page. The practical use of nesting tables however is useful and something that many websites develop to gain control over positioning without having to revert to absolutely positioned elements.


© designplace 2002
v 1.0


Remember, if you get stuck or need to ask any questions, register with the forums and tell us about it!

TemplateMonster - Affordable & Professional website templates!

Warning: include(includes/ads.php) [function.include]: failed to open stream: No such file or directory in /home1/design/public_html/tutorials.php on line 125

Warning: include(includes/ads.php) [function.include]: failed to open stream: No such file or directory in /home1/design/public_html/tutorials.php on line 125

Warning: include() [function.include]: Failed opening 'includes/ads.php' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home1/design/public_html/tutorials.php on line 125


le>