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

新着記事

#1724. 店名は変われど味は変わらず。横浜中華街・富泰楼麺房のとりそば ― 澄んだスープに鶏油と葱だけのシンプル極上ラーメン:
2026-01-20 横浜中華街・広東路の富泰楼麺房（ふうたいろうめんぼう）にてランチ。もとは揚州麺房だった店だが、2024年7月1日に店名を変更して富泰楼麺房になった。オーナーは変わったが、料理人はそのままで、料理の味も変わっていない。横浜中華街は店の入れ替わ...
#1723. 大ぶり海老天が2本。横浜元町「そば処木の芽」海老天丼 ― 蕎麦屋の仕事が光る:
2026-01-19 横浜・元町のそば処木の芽にてランチ。海老天丼をオーダー。蕎麦屋の丼ものの「花」と言えば、やはり天丼、なかでも海老天丼。今日は暖簾をくぐる前からそれ以外の選択肢が思い浮かばなかった。運ばれてきた丼には、大ぶりの海老天が堂々と2本。衣は軽く、...
#1722. 春菊＋柚子胡椒が決め手の本丸亭・横浜元町店の本丸塩らー麺 ― 代官坂で味わう極上塩ラーメンランチ:
2026-01-17 横浜・元町・代官坂のラーメン店本丸亭(ほんまるてい)横浜元町店にてランチ。本丸塩らー麺をオーダー。トッピングは、ガッツリ系のチャーシューに雲呑、そして春菊。標準で春菊が入っているのも特徴だが、さらに春菊を追加してもらう。春菊がラーメンに入る...
#1721. 黒ホッピーで独酌！東北人家の閃椒土豆絲＆干鍋筋头巴脑 ― 横浜中華街で味わう中国東北料理の辛旨キレ味:
2026-01-16 横浜中華街・広東道の東北人家(とうほくじんか)新館にて、晩餐という名の独酌。東北人家は、中国東北地方の料理(東北菜)の店。中華街では珍しくホッピーが置いてあり、本日も黒ホッピーのセットでスタート。オーダーは閃椒土豆絲(ジャガイモ細切りの唐辛...
#1720. 横浜・馬車道の老舗トンカツ「勝烈庵」で昼ビール＆ロースかつ定食 ― 休日に背筋が伸びる名店でひとり贅沢ランチ:
2026-01-16 休暇をとって、午前中に所用を済ます。そのまま、横浜の街を少し散歩して、横浜・馬車道の勝烈庵(かつれつあん)馬車道総本店にてランチ。勝烈庵といえば、横浜のトンカツの老舗。やや高級店の落ち着いた雰囲気があり、背筋が伸びる一方で、不思議と居心地が...