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

ステップアップ＆テクニック - ホームページ作成ガイド
HTML&CSS Web制作のインデックス
-各種リファレンスとサンプルコード集-

< HOME / ホームページ作成ガイド / バランス良く並べる
バランス良く並べる
テーブルタグを使用して、2つの内容（画像や表）をバランス良く並べてみます。

テーブル全体の幅や ALIGN="" を指定することで、ページの幅に対してバランス良く並べることができます。

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

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

※「テーブルタグの使用について」もご覧ください。
　配置方法
ページの幅に対して内容（画像、表、IFRAME）をバランス良く並べたい場合は、テーブルの幅を 100% に指定した上で、TRタグに ALIGN="center" の指定を行います。

例えば、画像をバランス良く並べたい場合は、次のように指定します。

<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>
</TR>
</TABLE>

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

sample1 sample2

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

sample1 sample2


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

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

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

</TD>
<TD>

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>WebデザインE</TD>
<TD>WebデザインF</TD>
</TR>
<TR>
<TD>WebデザインG</TD>
<TD>WebデザインH</TD>
</TR>
</TABLE>

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

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

WebデザインA WebデザインB
WebデザインC WebデザインD
WebデザインE WebデザインF
WebデザインG WebデザインH

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

WebデザインA WebデザインB
WebデザインC WebデザインD
WebデザインE WebデザインF
WebデザインG WebデザインH


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

［特集］ レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版

HTMLタグ｜スタイルシート｜JavaScript｜Webツール｜カラーチャート｜HP作成ガイド｜掲示板
< HOME PageTop▲