Or, how do I keep things on the page where I want them?
One of the most incredible, and subsequently most abused, aspects of html tables is the ability to nest them inside each other.
Incredible because you can place your navigation links in that left border of your page and expect it to stay there. Abused because nearly everyone eventually succumbs to the urge to strictly control item placement on the page.
So, Bimjo, what's wrong with that? In the print world, not a thing. On the web, it perverts the intention of having a fluid information enivronment, with the presentation controlled by the viewer, not the author.
Now before you jump down my throat let me admit that I too have occasionally been unable to resist the urge. It's difficult not to. But you can go overboard with it.
Anywho, we're here talking about nesting tables, and to show you how, and why you might want to, not preach for or against doing it.
Okay, picking up where we were in the last session, a nested table example, this time with a background color in the main table so you can see the two nested tables inside the main table:
|
|
|||||||||||||||||
The code for this nested table structure looks like this:
<table bgcolor="#c3a3f3" align="center" cellspacing="10">
<tr>
<td>
<table cellpadding="2" border="0">
<tr>
<td bgcolor="#ffff00" rowspan="2">Cell 1</td>
<td bgcolor="#ffff00">Cell 2</td>
<td bgcolor="#ffff00">Cell 3</td>
</tr>
<tr>
<td bgcolor="#ffff00" colspan="2">Cell 5</td>
</tr>
<tr>
<td bgcolor="#ffff00">Cell 7</td>
<td bgcolor="#ffff00">Cell 8</td>
<td bgcolor="#ffff00">Cell 9</td>
</tr>
</table>
</td>
<td width="20"> </td>
<td>
<table cellpadding="2" bgcolor="#ffff00" border="0">
<tr>
<td bgcolor="#ffff00" rowspan="2">Cell 1</td>
<td bgcolor="#ffff00">Cell 2</td>
<td bgcolor="#ffff00">Cell 3</td>
</tr>
<tr>
<td bgcolor="#ffff00" colspan="2">Cell 5</td>
</tr>
<tr>
<td bgcolor="#ffff00">Cell 7</td>
<td bgcolor="#ffff00">Cell 8</td>
<td bgcolor="#ffff00">Cell 9</td>
</tr>
</table>
</td>
</tr>
</table>