HTML編 17/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
テーブルを組む
表組の位置を指定する




<TR>と<TD>の使い方は解ったでしょうか?
では、おしながき部分のテーブルを組んでみましょう。「おしながき」タイトル部分は後回しにして、とりあえず各ページへのリンクする文字列と説明の文字列をテーブルにしてみます。横に2列、縦に4段のテーブルです。BORDERは3にします。中に入れる文字は上のSAMPLEを参照してください。
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>
<!--★★四角のグラデーション部分ここまで★★-->
</DIV>
<TABLE BORDER="3">
<TR>
<TD>●Profile</TD>
<TD>いわゆる自己紹介ってやつです。</TD>
</TR>
<TR>
<TD>●Macintosh</TD>
<TD>私が使ってきた歴代の愛機をご紹介します。</TD>
</TR>
<TR>
<TD>●Travel</TD>
<TD>旅行先で撮った写真を掲載しています。<BR>
まぁ、笑ってやってくださいませ。</TD>
</TR>
<TR>
<TD>●Enquete</TD>
<TD>アンケートにご協力ください。</TD>
</TR>
</TABLE>

</BODY>
</HTML>




表組の位置を指定する

●<TABLE ALIGN="n">
<TABLE>にもALIGNオプションが使えます。パラメータはもう解りますよね?デフォルトは「left」です。右ししたければ「right」を入れて下さい。テーブルを右合わせにしてみましょう。

<TABLE ALIGN="right"><TR><TD>〜</TD></TR></TABLE>

本来、TABLEに付けるALIGNオプションは、後でやる「画像の横に文字を配置する」のと同じ目的で使います。テーブルの前後は自動的に改行されてしまうため、テーブルの横に文字を入れることは出来ません。しかし、ALIGNを使うことによってテーブルの横にテキストを入力することが出来るようになります。使い方は画像のページをご覧ください。
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>
<!--★★四角のグラデーション部分ここまで★★-->
</DIV>
<TABLE BORDER="3"
ALIGN="right">
<TR>
<TD>●Profile</TD>
<TD>いわゆる自己紹介ってやつです。</TD>
</TR>
<TR>
<TD>●Macintosh</TD>
<TD>私が使ってきた歴代の愛機をご紹介します。</TD>
</TR>
<TR>
<TD>●Travel</TD>
<TD>旅行先で撮った写真を掲載しています。<BR>
まぁ、笑ってやってくださいませ。</TD>
</TR>
<TR>
<TD>●Enquete</TD>
<TD>アンケートにご協力ください。</TD>
</TR>
</TABLE>

</BODY>
</HTML>
さて、右合わせ・左合わせは出来ました。ではテーブルを真ん中に合わせるにはどうすればいいでしょう?パラメータに「center」とすれば…。確かにそうなのですが、どういうわけかver3のブラウザではTABLEタグにつけるALIGNオプションのセンターは無視されてしまいます。仕方がないのでテーブルをセンタリングしたい場合は、ALIGNを使わず<CENTER>で挟むか、<DIV>を使いましょう。とりあえず、ここではタイトルから◆までを挟んでいる</DIV ALIGN="center">の閉じタグ</DIV>を、テーブル閉じタグの下へ持ってくることで、テーブルまでまとめてセンター合わせにしました。

backindexnext