HTML編 16/51
| 目的別 index | タグ別 index | カラーチャート | images | SAMPLE |
テーブルを組む
表組を作る
表組に枠を付ける




表組を作る

●<TABLE><TR><TD>
「おしながき」の部分がもう一歩なので(笑)これをテーブルと言う機能を使って表現してみましょう。テーブルとは本来、表組を作るためのタグですが、これを利用することでかなり自由なレイアウトが可能になるため、現在のWebのデザインには欠かせない機能です。少々タグが複雑になりがちですので、コメントタグやインデントなどを利用するように心がけると良いと思います。
テーブルは<TABLE>と</TABLE>の間に書き込みます。しかし<TABLE>おしながき</TABLE>としても、テーブルは機能しません。なぜなら、表組を作るためのタグですので、縦列(行)、横列(セル)を設定しなければ表組にならないからです。行を設定するには<TR>を、セルを設定するには<TD>というタグを書きます。表組の中に表示したい物は、セルの中に入れます。
書き方としてはまず<TABLE></TABLE>があり、その中に行の<TR></TR>、さらにその中にセル(横列)の<TD></TD>を入れます。

<TABLE>
<TR>
<TD>この中が横列(セル)になります</TD>
</TR>
</TABLE>

ちょっと解りにくいかも知れませんが、実際にいくつかテーブルを作ってみれば、構造は理解できると思います。セルは<TD></TD>のタグを続けて書けば、いくつでも増やせます。それを1行ごとに<TR></TR>で挟み、1行はここからここまで、と指定します。2行目を作る時はまた<TR></TR>で挟んだ中に、<TD></TD>を書き込みます。
とりあえず、1行に3つのセルがある2行の表組を作ってみます。
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>

<TR>
<TD>
1行目1つ目のセル</TD>
<TD>
1行目2つ目のセル</TD>
<TD>
1行目3つ目のセル</TD>
</TR>

<TR>
<TD>
2行目1つ目のセル</TD>
<TD>
2行目2つ目のセル</TD>
<TD>
2行目3つ目のセル</TD>
</TR>

</TABLE>

</BODY>
</HTML>




表組に枠を付ける

●<TABLE BORDER="n">
ちょっとこれでは、表組なのかどうか解りづらいので、表組らしく枠線を付けてみましょう。枠線を付けるには<TABLE>タグにオプションでBORDERを加えます。パラメータにピクセル数を指定します。パラメータを付けないとデフォルトの1ピクセルとなります。色々な太さの枠線も試してみましょう。テーブルの前後は自動的に改行されます。
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>
<TR>
<TD>1行目1つ目のセル</TD>
<TD>1行目2つ目のセル</TD>
<TD>1行目3つ目のセル</TD>
</TR>
<TR>
<TD>2行目1つ目のセル</TD>
<TD>2行目2つ目のセル</TD>
<TD>2行目3つ目のセル</TD>
</TR>
</TABLE>

<TABLE
BORDER="3">
<TR>
<TD>BORDER="3"にしました</TD>
<TD>1行目2つ目のセル</TD>
<TD>1行目3つ目のセル</TD>
</TR>
<TR>
<TD>2行目1つ目のセル</TD>
<TD>2行目2つ目のセル</TD>
<TD>2行目3つ目のセル</TD>
</TR>
</TABLE>

<TABLE
BORDER="10">
<TR>
<TD>BORDER="10"にしました</TD>
<TD>1行目2つ目のセル</TD>
<TD>1行目3つ目のセル</TD>
</TR>
<TR>
<TD>2行目1つ目のセル</TD>
<TD>2行目2つ目のセル</TD>
<TD>2行目3つ目のセル</TD>
</TR>
</TABLE>

</BODY>
</HTML>

backindexnext