FujiPro「ウェブマスター」

FujiMan Production - ウェブマスター -

ホームページ制作講座 for Windows
テーブル(1)

トップページ＞ウェブマスター＞ホームページ制作講座＞テーブル(1)

■基本形

　罫線を使ってテーブル（表）を掲載することは、内容をより分かりやすく手法として欠かせませんね。テーブルのためのタグには、リストのようにその要素によっていくつか用意されていますが、リストと違って少々の慣れが必要です。

sample16.html

　サンプルも少しずつ発展させてきましたが、テーブルは少々とっつきにくいので、右のように簡単にしてみました。

　テーブル全体を示すタグは、<TABLE>～</TABLE>になります。「BORDER」オプションは、枠線の太さを示しています。「BORDER=0」にすると枠線は非表示になります。

　<TABLE>と</TABLE>の間に、テーブルとなる各要素を指示していきます。「sample16.html」には「<TR>～</TR>」と「<TD>～</TD>」が見えますが、これらみっつのタグがテーブルを作る基本となります。

　「<TD>～</TD>」は必ず「<TR>～</TR>」の間に入ります。

　データ要素として、このサイトの素材から掲示板アイコンを使ってみました。どうぞご利用ください。

■データ要素

sample16-1.html

　データ要素は、<TD>～</TD>を使います。

　この中には、ここでは画像を入れてみましたが、何でも指定することができます。この詳しい説明はあとに回しますが、文字でも構いません。

　このデータ要素をどんどん増やしていくと、「列要素」になることが分かります。

　つまり、<TR>～</TR>の中にある<TD>～</TD>の数が、テーブルの列の数になるということです。

■行要素

sample16-2.html

　残る<TR>～</TR>はなんの要素を指定しているのでしょうか・・・。

　これがテーブルの「行要素」を決めています。つまり<TR>の数だけ行の数があるということです。

　このサイトで提供させて頂いてるフリー素材のページは、こんな風にして各素材を表示しているわけですね。(^^)

<-RETURN