I have the following code that gives a nested table with the the green color showing at ALL cells :

<table border="0" cellspacing="0" width="300">
<tr>
<td bgcolor=green>
<div align="left">
<table border="0" cellspacing="1" width="300" cellpadding="5">
<tr>
<td bgcolor="#000000">&nbsp;</td>
<td bgcolor="#000000">&nbsp;</td>
<td bgcolor="#000000">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
<td bgcolor="#FFFFFF">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#C0C0C0">&nbsp;</td>
<td bgcolor="#C0C0C0">&nbsp;</td>
<td bgcolor="#C0C0C0">&nbsp;</td>
</tr>
</table>
</div>
</td>
</tr>
</table>


I want to make this so that each adjacent <td> be a different height (depending on the cell contents) while at the same time keeping the 1 px green color around all cells. I know of rowspan, colspan... but I want really different cell sizes that may or may not be the equivalent size of 2 (or other) rows or columns

can anybody help? OR is there a less confusing way of achieving the same result?