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>

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

外側のテーブル:

テーブル幅 = 適当です。今回は 400。
枠線幅 = 0
セル間隔 = 0
セル内のマージン = 1 (ここが重要です! この部分が枠線のピクセルになります。)

<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>

内側のテーブル:

テーブル幅 = 100% (とても重要です! 100% にすることで、外側のセルに「ぴちっ」とくっつきます)
枠線幅 = 0
セル間隔 = 0
セル内のマージン = 適当です。今回は 5。

<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>

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

Tips!: 枠線の色と内側の下地の色は同系色でまとめると、すっきりします。上の例だと、枠線の色 = 濃い青、内側の下地の色 = 薄い青のようにね。

1. 基本的な作成方法

新着記事