1. 基本的な作成方法

さて、それではひとつ、作ってみましょうか。

まず、 1 x 1 セルのテーブルを作ります。

<table width="300" border="1" cellspacing="2" cellpadding="0">
  <tr>
   <td>こんなカンジです。</td>
  </tr>
</table>

とりあえず、セルに色を付けます。

<table width="300" border="1" cellspacing="2" cellpadding="0">
 <tr>
  <td bgcolor="#f0ffff">こんなカンジです。</td>
 </tr>
</table>

色を変えて、もう一つ、同じようなテーブルを作ります。

<table width="300" border="1" cellspacing="2" cellpadding="0">
 <tr>
  <td bgcolor="#1e90ff">こんなカンジです。</td>
 </tr>
</table>

で、このテーブルの中に先ほどのテーブルを入れます (セルの中の文字は消してください)。テーブルの入れ子(ネスト)ですね。

<table width="300" border="1" cellspacing="2" cellpadding="0">
 <tr>
   <td bgcolor="#1e90ff">
   <table width="300" border="1" cellspacing="2" cellpadding="0">
    <tr>
     <td bgcolor="#f0ffff">こんなカンジです。</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

さて、ここからがポイントの微調整です。

外側のテーブル:

<table width="400" border="0" cellspacing="0" cellpadding="1">
 <tr>
  <td bgcolor="#1e90ff">
   <table width="300" border="1" cellspacing="2" cellpadding="0">
    <tr>
     <td bgcolor="#f0ffff">こんなカンジです。</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

内側のテーブル:

<table width="400" border="0" cellspacing="0" cellpadding="1">
 <tr>
  <td bgcolor="#1e90ff">
   <table width="100%" border="0" cellspacing="0" cellpadding="5">
    <tr>
     <td bgcolor="#f0ffff">こんなカンジです。</td>
    </tr>
   </table>
  </td>
 </tr>
</table>

これで基本形ができあがりです。