HTMLでのテーブル処理を整理しました。CSS版も、その内アップします。
まず、9マスが均一の場合の基本形状です。
--------------------------<table frame="void" rules="none" height="300" border=0 cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="100" bgcolor="#fcff00">バナナ</td>
<td align="center" width="100" bgcolor="#ff4dad">イチゴ</td>
<td align="center" width="100" bgcolor="#ffc90c">夏みかん</td>
</tr>
<tr>
<td align="center" bgcolor="#f88dff">無花果</td>
<td align="center" bgcolor="#ff7e0c">柿</td>
<td align="center" bgcolor="#e7cd66">梨</td>
</tr>
<tr>
<td align="center" bgcolor="#99CC00">西瓜</td>
<td align="center" bgcolor="#ac63ff"><font color="#FFFFFF">葡萄</font></td>
<td align="center" bgcolor="#1fff8e">メロン</td>
</tr>
</table>
--------------------------
バナナが横2マス、夏みかんが縦3マスの場合（イチゴ、梨、メロンは無し）
--------------------------
<table frame="void" rules="none" height="300" border=0 cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center" width="200" bgcolor="#fcff00">バナナ</td>
<td align="center" rowspan="3" width="100" bgcolor="#ffc90c">夏みかん</td>
</tr>
<tr>
<td align="center" width="100" bgcolor="#f88dff">無花果</td>
<td align="center" width="100" bgcolor="#ff7e0c">柿</td>
</tr>
<tr>
<td align="center" bgcolor="#99CC00">西瓜</td>
<td align="center" bgcolor="#ac63ff"><font color="#FFFFFF">葡萄</font></td>
</tr>
</table>
--------------------------
無花果が横2マス、夏みかんが縦3マスの場合（柿、梨、メロンは無し）
--------------------------
<table frame="void" rules="none" height="300" border=0 cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="100" bgcolor="#fcff00">バナナ</td>
<td align="center" width="100" bgcolor="#ff4dad">イチゴ</td>
<td align="center" rowspan="3" width="100" bgcolor="#ffc90c">夏みかん</td>
</tr>
<tr>
<td colspan="2" align="center" width="200" bgcolor="#f88dff">無花果</td>
</tr>
<tr>
<td align="center" bgcolor="#99CC00">西瓜</td>
<td align="center" bgcolor="#ac63ff"><font color="#FFFFFF">葡萄</font></td>
</tr>
</table>
--------------------------
無花果が縦2マス、柿が横2マスの場合（梨、メロンは無し）
--------------------------
<table frame="void" rules="none" height="300" border=0 cellpadding="0" cellspacing="0">
<tr>
<td align="center" width="100" bgcolor="#fcff00">バナナ</td>
<td align="center" width="100" bgcolor="#ff4dad">イチゴ</td>
<td align="center" width="100" bgcolor="#ffc90c">夏みかん</td>
</tr>
<tr>
<td rowspan="2" align="center" width="100" bgcolor="#f88dff">無花果</td>
<td colspan="2" align="center" width="100" bgcolor="#ff7e0c">柿</td>
</tr>
<tr>
<td align="center" bgcolor="#99CC00">西瓜</td>
<td align="center" bgcolor="#ac63ff"><font color="#FFFFFF">葡萄</font></td>
</tr>
</table>
--------------------------
バナナと西瓜が横2マス、無花果と夏みかんが縦2マスの場合（イチゴ、梨、葡萄、メロンは無し）
--------------------------
<table frame="void" rules="none" height="300" border=0 cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center" width="200" bgcolor="#fcff00">バナナ</td>
<td rowspan="2" align="center" width="100" bgcolor="#ffc90c">夏みかん</td>
</tr>
<tr>
<td rowspan="2" align="center" width="100" bgcolor="#f88dff">無花果</td>
<td align="center" width="100" bgcolor="#ff7e0c">柿</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#99CC00">西瓜</td>
</tr>
</table>
--------------------------
