(cache) ホームページ作成・テーブルの中にテーブルをつくる

複数のセルを貫く

●セルを横に貫く右下図のように、テーブルの上の方にロゴや表題を入れたい場合、一番上のセル、ふたつを横に貫いて一つのセルとし、そこに横長の画像を入れたりすることができます。
「メモ帳」を起動させて下記のように入力してください。 ※スペースの関係でタグの途中で改行しています。実際に記述する場合は１行で記述してください。	●ブラウザ画面 ※上の画像をクリックすると実際のHTMLファイルが開きます。
貫きたいセルの<td>タグに「colspan="●"」を記述します。「"●"」の部分には貫くセルの数を指定します。今回の場合はセルを2つ貫きますので「2」になります。また、「border="0"」（枠線の表示なし）、「cellpadding="0"」（セルの枠と中の画像との間隔なし）、「cellspacing="10"」（セルとセルの間隔を１０ピクセルに指定）にしています。

●セルを縦に貫く右下の図のように、テーブルの左端にロゴや表題を入れたい場合、一番左のセル二つを縦に貫いて一つのセルとし、そこに縦長の画像を入れたりすることができます。
「メモ帳」を起動させて下記のように入力してください。 ※スペースの関係でタグの途中で改行しています。実際に記述する場合は１行で記述してください。	●ブラウザ画面 ※上の画像をクリックすると、実際のHTMLファイルが開きます。
貫きたいセルの<td>タグに「rowspan="●"」を記述します。「●」の部分には貫くセルの数を指定します。今回の場合はセルを2つ貫きますので「2」となります。また「border="0"」（枠線の表示なし）、「cellpadding="0"」（セルの枠と中の画像との間隔なし）、「cellspacing="10"」（セルとセルの間隔を１０ピクセルに指定）にしています。

テーブルの中にテーブルをつくる

ちょっと、手の込んだレイアウトにしようとした場合に必要となるテクニックが「ネスト」という手法です。これは、テーブルの、ある特定のセルの中に、更にテーブルを挿入するもので、この手法をマスターするとホームページ作成ソフトでは作ることができない、厚みのあるレイアウトを組むことができます。
「メモ帳」を起動させて下記のように入力してください。 ※スペースの関係でタグの途中で改行しています。実際に記述する場合は１行で記述してください。	●ブラウザ画面 ※上の画像をクリックすると実際のHTMLファイルが開きます。
右上のようなレイアウトを作る場合、まず、背景となるテーブル（１行１列）を作ります。（緑で記述されたテーブル）そのセルの中に(<td>～</td>)新規のテーブル（黒で記述されたテーブル）を記述します。外側のテーブルは「cellpadding="20"」として、額縁のように輪郭を作ります。セルの背景色には「#ffdab9」を指定しています。