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

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

< HOME / ホームページ作成ガイド / 上揃えと下揃え
上揃えと下揃え
テーブルタグを使用して、高さの異なる2つの表を上揃え、または下揃えで並べてみます。

VALIGN="" を指定することで、高さの異なる内容（画像、表、IFRAME）を上のライン、または下のラインに揃えて並べることができます。

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

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

※「テーブルタグの使用について」もご覧ください。
　配置方法
セルの内容は、デフォルトでは上下に対して中央揃えになります。

HP作成A社 HP作成B社
サーバーA社 サーバーB社
サーバーC社 サーバーD社
サーバーE社 サーバーF社

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

HP作成A社 HP作成B社
サーバーA社 サーバーB社
サーバーC社 サーバーD社
サーバーE社 サーバーF社


高さの異なる内容（画像、表、IFRAME）を並べた場合で、それらを上揃え、または下揃えにしたい場合には、TRタグに VALIGN="" の指定を行います。

上揃えの場合は VALIGN="top" を 、下揃えの場合は VALIGN="bottom" を指定します。

例えば、高さの異なる表を並べた場合は、次のような感じになります。

■上揃えに指定した場合

<TABLE BORDER="0" WIDTH="500" CELLSPACING="0" CELLPADDING="0">
<TR VALIGN="top">
<TD>

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>Web制作A</TD>
<TD>Web制作B</TD>
</TR>
</TABLE>

</TD>
<TD>

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>デザイン1</TD>
<TD>デザイン2</TD>
</TR>
<TR>
<TD>デザイン3</TD>
<TD>デザイン4</TD>
</TR>
<TR>
<TD>デザイン5</TD>
<TD>デザイン6</TD>
</TR>
</TABLE>

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

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

Web制作A Web制作B
デザイン1 デザイン2
デザイン3 デザイン4
デザイン5 デザイン6


■下揃えに指定した場合

<TABLE BORDER="0" WIDTH="500" CELLSPACING="0" CELLPADDING="0">
<TR VALIGN="bottom">
<TD>

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>Web制作A</TD>
<TD>Web制作B</TD>
</TR>
</TABLE>

</TD>
<TD>

<TABLE BORDER="2" CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>デザイン1</TD>
<TD>デザイン2</TD>
</TR>
<TR>
<TD>デザイン3</TD>
<TD>デザイン4</TD>
</TR>
<TR>
<TD>デザイン5</TD>
<TD>デザイン6</TD>
</TR>
</TABLE>

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

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

Web制作A Web制作B
デザイン1 デザイン2
デザイン3 デザイン4
デザイン5 デザイン6


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

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

inserted by FC2 system