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

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / 両端に表示する
両端に表示する


テーブルタグを使用して、ページの両端に画像や表を表示させてみます。

テーブル全体の幅や ALIGN="" を指定することで、ページの両端に表示できるようになります。

ここでは画像と表を使って説明していますが、インラインフレームなども同じ要領で両端に表示させることができます。

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

「テーブルタグの使用について」もご覧ください。


 配置方法
ページの両端に内容(画像、表、IFRAME)を表示させたい場合は、テーブルの幅を 100% に指定した上で、右側のセル(TDタグ)に ALIGN="right" を指定します。

例えば、画像を両端に表示させたい場合は、次のように指定します。

<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="right">


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

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


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

sample1 sample2

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

sample1 sample2

セルの内容は、デフォルトでは左側に寄ります。ですので、左側のセルはそのままで、右側のセルにのみ ALIGN="" を追加して right(右寄せ) を指定しています。


間隔をもう少し狭くしたい場合には、テーブル全体をセンタリングした上で、テーブルの幅を狭くします。

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


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

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


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

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

</CENTER>

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

sample1 sample2

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

sample1 sample2



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

<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="right">


<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>HP作成E</TD>
<TD>HP作成F</TD>
</TR>
<TR>
<TD>HP作成G</TD>
<TD>HP作成H</TD>
</TR>
</TABLE>

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


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

HP作成A HP作成B
HP作成C HP作成D
HP作成E HP作成F
HP作成G HP作成H

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

HP作成A HP作成B
HP作成C HP作成D
HP作成E HP作成F
HP作成G HP作成H



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


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲