テーブルちょっと応用編
超簡単ＨＴＭＬ基礎

大抵のホームページでは、テーブル（表）を利用しています。このテーブルの利用方法・・・単にマス目の表だけではなく色々と応用できます。少しだけテーブルを使った応用例を紹介します。
■STEP2-1．まずはテーブル無しのページから・・・
　まずは、テーブル無しのページからスタートです。　このページは、ＨＴＭＬ基礎の基礎 前編で紹介したページ同様、ＨＴＭＬの基本ページです。
<HTML>
<HEAD>
<TITLE>テーブルなしサンプルページ</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<BR>
<H2>アメリカン・コッカー・スパニエル</H2>
ディズニーのアニメ映画「わんわん物語」の主人公として有名になった犬種。<BR>
大きな垂れ耳と胸・腹部・足の後ろ側にある長い飾り毛がドレスのようでおしゃれで、
ショードッグとして人気がある。イングリッシュ・コッカー・スパニエルをアメリカで
改良してつくられた犬種で、元々は鳥猟犬の仲間。ヤマシギ猟が得意なことから
コッカーと名付けられた。<BR>
 </BODY>
</HTML>










HTMLサンプルページ11 (sample11.html)
文章だけのサンプルページです。文章がウィンドウの横幅一杯に表示されていますが、大きなサイズのウィンドウでは、これが結構読みづらいんです。試しに、ウィンドウの横幅を広げて見て下さい。

HomePage作成支援Top HomePage

■STEP2-2．文章をテーブルに入れてみる
　文章の部分だけ１行１列のテーブルの中に入れてみました。テーブルの横幅をウィンドウ幅の85%に設定して、全体をセンタリングしています。ウィンドウ幅を変化させると、テーブルの幅も変化します。
<HTML>
<HEAD>
<TITLE>テーブルのサンプルページ１</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<BR>
<H2>アメリカン・コッカー・スパニエル</H2>
<TABLE BORDER="1" WIDTH="85%">
<TR>
<TD>
ディズニーのアニメ映画「わんわん物語」の主人公として有名になった犬種。<BR>
大きな垂れ耳と胸・腹部・足の後ろ側にある長い飾り毛がドレスのようでおしゃれで、
ショードッグとして人気がある。イングリッシュ・コッカー・スパニエルをアメリカで
改良してつくられた犬種で、元々は鳥猟犬の仲間。ヤマシギ猟が得意なことから
コッカーと名付けられた。<BR>
 </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>






<TABLE ...
　WIDTH="テーブル幅">
でテーブルの横幅を指定
できます．

テーブル幅を「85%」のよう
に指定すると、ウィンドウ
幅の85%の横幅のテーブ
ルになります．
HTMLサンプルページ12 (sample12.html)
テーブルの横幅をウィンドウ幅の85%に指定したサンプルページです。ウィンドウの横幅を変えると、テーブル横幅も変化するので試して見て下さい。

HomePage作成支援Top HomePage

■STEP2-3．テーブルの枠線を消す
　次にテーブルの枠線を消してみます。テーブルの枠線を消すには、テーブルのタグの中で BORDER="0" と指定します。テーブルの枠線を消すことができると、レイアウトの面で色々と応用できそうです。
<HTML>
<HEAD>
<TITLE>テーブルのサンプルページ２</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<BR>
<H2>アメリカン・コッカー・スパニエル</H2>
<TABLE BORDER="0" WIDTH="85%">
<TR>
<TD>
ディズニーのアニメ映画「わんわん物語」の主人公として有名になった犬種。<BR>
大きな垂れ耳と胸・腹部・足の後ろ側にある長い飾り毛がドレスのようでおしゃれで、
ショードッグとして人気がある。イングリッシュ・コッカー・スパニエルをアメリカで
改良してつくられた犬種で、元々は鳥猟犬の仲間。ヤマシギ猟が得意なことから
コッカーと名付けられた。<BR>
 </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>






<TABLE ...
　BORDER="枠線の幅">
でテーブルの枠線の幅を
指定できます．

BORDER="0"にすると、
枠線を消すことができま
す．
HTMLサンプルページ13 (sample13.html)
テーブルの枠線を消したサンプルページです。テーブルの枠は表示されていませんが、テーブル横幅はウィンドウ幅の85%のままです。ウィンドウ幅を変化させて試してみて下さい。

HomePage作成支援Top HomePage

■STEP2-4．テーブルの横幅を固定する
　今度は、テーブルの横幅を固定してみます。テーブルタグの中の WIDTH="テーブル幅" で、テーブルの横幅をピクセル数で指定することもできます。ウィンドウ幅を変化させても、テーブルの幅は変化しません。
<HTML>
<HEAD>
<TITLE>テーブルのサンプルページ３</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<BR>
<H2>アメリカン・コッカー・スパニエル</H2>
<TABLE BORDER="0" WIDTH="400">
<TR>
<TD>
ディズニーのアニメ映画「わんわん物語」の主人公として有名になった犬種。<BR>
大きな垂れ耳と胸・腹部・足の後ろ側にある長い飾り毛がドレスのようでおしゃれで、
ショードッグとして人気がある。イングリッシュ・コッカー・スパニエルをアメリカで
改良してつくられた犬種で、元々は鳥猟犬の仲間。ヤマシギ猟が得意なことから
コッカーと名付けられた。<BR>
 </TD>
</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>






<TABLE ...
　WIDTH="テーブル幅">
でテーブルの横幅を指定
できます．

テーブル幅を「400」とす
ると、テーブルの横幅が
400ピクセルに固定され
ます．
HTMLサンプルページ14 (sample14.html)
テーブルの横幅を400ピクセルに固定したサンプルページです。ウィンドウ幅を変化させても、文章の横幅は変化せず固定されています。BORDER="0"にしているので、テーブルの枠線は表示されません。

HomePage作成支援Top HomePage
Prev.
テーブル基礎編		 Next
テーブルもうちょっと応用編
Copyright(C) 2001 T.Kaze/Family Page Hiroshima