HTML編 22/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
テーブルを組む
テーブルをネストする




テーブルをネストする

もう一つだけテーブルの便利な使い方を説明しておきます。
テーブルのセルの中にはテキストはもちろん、画像を入れることも出来ます。しかし、それだけでなく、セルの中にもう一つテーブルを入れることも出来るのです。これを「ネスト」と言います。単純に<TD>と</TD>のセルの中にもう一つ<TABLE>〜</TABLE>を入れてしまえばいいのです。
試しにEnquete欄の「アンケートにご協力ください。」の部分をネストしてみましょう。テーブルをネストさせると、とたんに複雑なHTMLになりますので、コメントタグは必須です。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">
<H2 ALIGN="center">ようこそ!</H2>
<HR SIZE="5" WIDTH="321">
<DIV ALIGN="center">
<!--★★タイトルの部分★★-->
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->

<TABLE BGCOLOR="#ffffff" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
<TH BGCOLOR="#009933" COLSPAN="2"><FONT COLOR="#ffffff">おしながき</FONT></TH>
------略-------
<TR>
<TD NOWRAP>●Enquete</TD>
<TD>

<!--★★ここからテーブルをもう一つ挿入★★-->
<TABLE BGCOLOR="#cc99ff" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD><FONT SIZE="1">アンケートにご協力ください。</FONT></TD>
</TR>
</TABLE>
<!--★★テーブルネストここまで★★-->

</TD>
</TR>
</TABLE>
</DIV>
</BODY>
</HTML>

ネストさせたテーブルの色を変えて、BORDERを0にしたことで「アンケートにご協力ください。」の部分が色帯で表示されています。

テーブルをネストさせることで出来る、もう一つの表現方法をご紹介しましょう。
先ほどまで作っていたHTMLはALIGNタグなどで左右はセンター合わせになっていますが、天地は上合わせになっていますね?このHTML全体を天地左右100%のテーブルのセルにくくってしまって、TD ALIGN="center" VALIGN="middle"とすればどうでしょう。そう、全体がブラウザの中央に表示されます。
Webは大きいモニタで見ている人、小さいモニタで見ている人、見ている人の環境は様々です。小さいモニタで見ている人ために、小さめのレイアウトを組んだ場合、大きいモニタで見ている人には、どことなく間抜けなレイアウトになってしまいます。この「全体を中央に表示する」やりかたは、トップページなどでは非常に有効な方法だと思いませんか?
またこの方法ですと、<HR>や<DIV>などでcenterに指定しなくても済みますね。
View
<HTML>
<HEAD>
<TITLE>ようこそ!Kimura's Roomへ</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=Shift_JIS">
</HEAD>
<BODY BGCOLOR="#ececec">

<CENTER>
<!--★★全体をセンターにするためのテーブル★★-->
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="97%" HEIGHT="97%">
<TR>
<TD ALIGN="center" VALIGN="middle">
<!--★★ここから内容★★-->
<H2>ようこそ!</H2>
<HR SIZE="5" WIDTH="321">
<FONT SIZE="7" COLOR="#009900" FACE="Times New,Times,Times Roman"><B><I>Kimura's Room</I></B></FONT><BR>
<!--★★四角のグラデーション部分ここから★★-->
<FONT SIZE="2" COLOR="#0000ff">◆</FONT>
------略-------
<FONT SIZE="2" COLOR="#ff0000">◆</FONT>
<!--★★四角のグラデーション部分ここまで★★-->

<!--★★おしながきのテーブル★★-->
<TABLE BGCOLOR="#ffffff" BORDER="3" CELLPADDING="2" CELLSPACING="3">
<TR>
<TH BGCOLOR="#009933" COLSPAN="2"><FONT COLOR="#ffffff">おしながき</FONT></TH>
------略-------
<TD NOWRAP>●Enquete</TD>
<TD><FONT SIZE="2">アンケートにご協力ください。</FONT></TD>
</TR>
</TABLE>
<!--★★ここまで内容★★-->

<!--★★全体をセンターにするためのテーブルを閉じる★★-->
</TD>
</TR>
</TABLE>

</CENTER>
</BODY>
</HTML>

上で全体を囲むテーブルを「100%」とせずに「97%」としたのは、ブラウザなどの条件によっては100%のテーブルは無意味なスクロールバーが表示される可能性があるからです。

さて、長々とテーブルについて説明してきましたが、テーブルがどれだけ多機能なタグか解ってもらえれば幸いです。これまで一つも画像を使っていませんが、どうでしょう、そこそこのデザインがタグだけで出来ると思いませんか?画像をあまり使っていないページは、読み込みが早く、見る人にとって快適なページです。たとえタグだけでもアイデア次第でかなりのデザインが可能です。たとえばこんなトップページなどどうでしょう。View

backindexnext