HTML index
ホームページ作成ガイド

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作リファレンス
-ホームページ作成を学ぶ・調べる-

< HOME / ホームページ作成ガイド / 3つ以上並べる
3つ以上並べる
テーブルタグを使用して、画像や表を3つ以上並べてみます。

並べる数だけテーブルのセル（TDタグ）を作成します。テーブル全体の幅や ALIGN="" を指定することで、ページの幅に対してバランス良く並べることもできます。

ここでは画像と表を使って説明していますが、インラインフレームなども同じ要領で並べていくことができます。

※並べ方の基本的な説明は、「画像、表、IFRAMEを並べてみる」をご覧ください。
※テーブルタグについての詳細は、「テーブルタグ」カテゴリーをご覧ください。

※「テーブルタグの使用について」もご覧ください。
　配置方法
例えば4つの内容（画像、表、IFRAME）を並べる場合は、テーブルのセル（TDタグ）を4つ作成し、その中に内容を入れます。

ページの幅に対して内容をバランス良く並べたい場合は、テーブルの幅を 100% に指定した上で、TRタグに ALIGN="center" の指定を行います。

画像を4つ並べる場合は、次のように指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR ALIGN="center">
<TD>

<IMG SRC="image/img1.gif" ALT="sample1" WIDTH="100" HEIGHT="100">

</TD>
<TD>

<IMG SRC="image/img2.gif" ALT="sample2" WIDTH="100" HEIGHT="100">

</TD>
<TD>

<IMG SRC="image/img3.gif" ALT="sample3" WIDTH="100" HEIGHT="100">

</TD>
<TD>

<IMG SRC="image/img4.gif" ALT="sample4" WIDTH="100" HEIGHT="100">

</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

sample1 sample2 sample3 sample4

※わかりやすくするために、枠線を表示させてみました。

sample1 sample2 sample3 sample4


　「左端」「中央」「右端」
3つの内容（画像、表、IFRAME）を、「左端」「中央」「右端」といった感じで並べたい場合は、テーブルの幅を 100% に指定した上で、セル（TDタグ）に ALIGN="" の指定を行います。

例えば、画像を並べる場合は次のように指定します。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>

<IMG SRC="image/img1.gif" ALT="sample1" WIDTH="100" HEIGHT="100">

</TD>
<TD ALIGN="center">

<IMG SRC="image/img2.gif" ALT="sample2" WIDTH="100" HEIGHT="100">

</TD>
<TD ALIGN="right">

<IMG SRC="image/img3.gif" ALT="sample3" WIDTH="100" HEIGHT="100">

</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

sample1 sample2 sample3

※わかりやすくするために、枠線を表示させてみました。

sample1 sample2 sample3

セルの内容は、デフォルトでは左側に寄ります。ですので、左側のセルはそのままで、中央のセルに ALIGN="center"（センタリング） を、右側のセルに ALIGN="right"（右寄せ） を指定しています。

　表を並べた場合の例
表を並べた場合のサンプルです。

<TABLE BORDER="0" WIDTH="100%" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>HP作成A</TD>
<TD>HP作成B</TD>
</TR>
<TR>
<TD>HP作成C</TD>
<TD>HP作成D</TD>
</TR>
</TABLE>

</TD>
<TD ALIGN="center">

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>デザインA</TD>
<TD>デザインB</TD>
</TR>
<TR>
<TD>デザインC</TD>
<TD>デザインD</TD>
</TR>
</TABLE>

</TD>
<TD ALIGN="right">

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>サーバーA</TD>
<TD>サーバーB</TD>
</TR>
<TR>
<TD>サーバーC</TD>
<TD>サーバーD</TD>
</TR>
</TABLE>

</TD>
</TR>
</TABLE>

・これをブラウザで見ると次のように表示されます

HP作成A HP作成B
HP作成C HP作成D
デザインA デザインB
デザインC デザインD
サーバーA サーバーB
サーバーC サーバーD

※わかりやすくするために、枠線を表示させてみました。

HP作成A HP作成B
HP作成C HP作成D
デザインA デザインB
デザインC デザインD
サーバーA サーバーB
サーバーC サーバーD


ホームページ作成ガイドTOP

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜テンプレート｜
< HOME PageTop▲

inserted by FC2 system