Nesting Tables
Laying out pages with tables is all well and good, but to get the exact look you want, you may need to get a touch more complicated and start placing tables inside tables for the utmost control.
This page was last updated on 2012-08-21
Tables inside Tables
The largest, most complicated tables will often involve “nesting” individual tables inside one another to get the desired layout. This is tricky, due to the amount of tags you have to juggle, and get in the right order. Here’s a simple example of a nested table:
| First cell in first table. The cell to the right has the second table in it. |
|
The code to create that, basically, goes like this (the second table code is indented):
<table>
<tr>
<td>First cell in first table. The cell to the right has the second table in it.</td>
<td>
<table>
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>
</td>
</tr>
</table>
Before you start nesting tables and getting yourself into all manner of trouble, you should first have a firm grasp of the basics and advanced tables too. By now you should be able to spin out table code easily.
There isn’t really much explaining to be done here — the theory of how to nest tables is simple, it’s implementation that’s tricky, as people often get a bit carried away with their tables.
You can see above, the main table is coded normally, but when the second td is made, you code an entirely new table inside it. This table must be closed with all the standard /trs and /tables before you close the cell that it’s in. If you code this incorrectly and leave out some end tags your table might not appear on the screen, especially in strict mode, which is very harsh on erroneous code.
Making Coloured Borders
There is an attribute to change the colour of your table borders (bordercolor), but it is only supported by Internet Explorer, and so Netscape users will get a dull grey one. Using nested tables is an old hack to give your tables coloured borders. You can use this to create boxes similar to the ones in the navigation bar of this page (although they are created through CSS borders).
To make boxes like these, you're using the bgcolor attribute of tables — it actually has nothing to do with borders at all. Here's the code:
<table border="0" bgcolor="#006600" cellpadding="5" cellspacing="0">
<tr><td>
<table width="100%" border="0" bgcolor="#009900" cellspacing="0">
<tr><td>
table content
</td></tr>
</table>
</td></tr>
</table>
|
That’ll create the table to the right. See, I’ve set both table’s borders to 0 to get rid of them. Now, the main table’s background colour is set to the border colour you want. The trick is in using the main table’s padding — this is what the border’s thickness depends on. The inner table is being pushed in by the padding, leaving a gap of the outside colour. If your inner table is going to contain multiple cells, adjust its cellspacing if you want some border between them.
