見る人に優しいウエブ作成


Directory

テーブル応用編 (1)
テーブル応用編 (2)
テーブル注意事項 (1)
テーブル注意事項 (2)


Contents

優しいウエブ作成
HTML入門
画像処理入門
ページレイアウト入門
スタイルシート入門
用語集
サポートタグ

+++ ページレイアウト入門(応用編)+++

戻る
次へ

■ 複数テーブル指定でのレイアウト2

次にこのサイトのトップページです。先程より面倒になってます。


ブラウザイメージ
image Titleimage


Contents

image Table A
Table B image
image Table C
Table D image


この場合のタグはこの様になります。

<HTML>
<HEAD>
</HEAD>
<BODY>

<!--1個目のテーブル -->
<TABLE WIDTH="370" HEIGHT="30" BORDER="1">
<TR>
<TD>image</TD>
<TD WIDTH="280" ALIGN="center">Title</TD>
<TD>image</TD>
</TR>
</TABLE>
<!--1個目のテーブル終了 -->

<!--2個目のテーブル -->
<TABLE WIDTH="370" BORDER="1">
<TR>

<!--2個目のテーブルの1列目 -->
<TD WIDTH="100" VALIGN="top">
<BR><BR>Contents<BR><BR>
</TD>
<!--2個目のテーブルの1列目終了 -->

<!--2個目のテーブルの2列目 -->
<TD WIDTH="270">
<!--2列目のテーブルA -->
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="70" ALIGN="right">image</TD>
<TD>Table A</TD>
</TR></TABLE>
<!--2列のテーブルA終了 -->

<!--2列目のテーブルB -->
<DIV ALIGN="right">
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD ALIGN="right">Table B</TD>
<TD WIDTH="70">image</TD>
</TR></TABLE>
</DIV>
<!--2列目のテーブルB終了 -->

<!--2列目のテーブルC -->
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR>
<TD WIDTH="70" ALIGN="right">image</TD>
<TD>Table C</TD>
</TR>
</TABLE>
<!--2列目のテーブルC終了 -->

<!--2列目のテーブルD -->
<DIV ALIGN="right">
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="10">
<TR><TD ALIGN="right">Table D</TD>
<TD WIDTH="70">image</TD>
</TR></TABLE>
</DIV>
<!--2列目のテーブルD終了 -->
</TD>
<!--2個目のテーブルの2列目終了 -->

</TR></TABLE>
<!--2個目のテーブル終了 -->


</BODY>
</HTML>

全て見るのが疲れるくらい長いタグですね。Table BとDは、2個目のテーブル内の2列目内で右よりに配置されるようにしています。 全てが参考になるとは思えませんが、この様にテーブルを幾つか作成すると自由な配置をする事ができる事がお判り頂けたでしょうか。
尚、幅はこの例用なので実際には最適化する必要があります。

テーブルを使うと自由できちんとしたレイアウトが実現できますが、表示が通常に比べ遅くなります。 又、テーブルを使いすぎると、上記のようにファイル自体の容量が大きくなりますので注意が必要です。




Prev | Home | Next




Copyright(C) 1999-2000, ken_yuu All Right Reserved.