ホームページの作り方２

表を使ってみよう

ホームページで表を使うと、ページがまとまった感じになります。
表は<TABLE>〜</TABLE>タグを使います。でも表の場合には行や列などがあり、このタグだけでは表になりません。<TABLE>〜</TABLE>タグはここからここまでが表です、ということを指示するだけです。
実際に行や列を作るには<TR>〜</TR>という行を定義するタグや<TD>〜</TD>という列を定義するタグを使う必要があります。これらのタグは<TABLE>〜</TABLE>タグで挟んで初めて表として表示できます。

●表の基本的な書き方は次のようになります。
<TABLE>
<TR><TD>データ1-1</TD><TD>データ1-2</TD>…</TR>
<TR><TD>データ2-1</TD><TD>データ2-2</TD>…</TR>
　･
　･
</TABLE>

つまり表の中の1ます(セルといいます)を<TD>〜</TD>タグで囲み、これらが行(横の並び)１行集まったところを<TR>〜</TR>タグで囲み、さらにそれが集まった表全体を<TABLE>〜</TABLE>タグで囲むということになります。

たとえば次のように書いてみましょう。
<TABLE>
<TR><TD>１行１列</TD><TD>１行２列</TD><TD>１行３列</TD></TR>
<TR><TD>２行１列</TD><TD>２行２列</TD><TD>２行３列</TD></TR>
<TR><TD>３行１列</TD><TD>３行２列</TD><TD>３行３列</TD></TR>
<TR><TD>４行１列</TD><TD>４行２列</TD><TD>４行３列</TD></TR>
</TABLE>

これを表示させると次のようになります。

１行１列１行２列１行３列
２行１列２行２列２行３列
３行１列３行２列３行３列
４行１列４行２列４行３列

しかし、これでは枠線も何もなくて味気ない表にしかなりません。
表に枠線や背景色をつけるには属性を指定します。
<TABLE>〜</TABLE>タグにつけられる属性
属性説明属性を指定する例
BORDER枠線の太さをピクセルで指定します。
値は整数を指定してください。
ちなみにこの表はBORDER=2です		BORDER=2
BORDER=3
BORDERCOLOR枠線の色を#RGB値またはカラーネームで指定します。BORDERCOLOR="#FFFF00"
BORDERCOLOR="red"
BGCOLOR表全体の背景色を#RGB値またはカラーネームで指定します。BGCOLOR="#FFFF00"
BGCOLOR="red"
WIDTH表全体の幅をピクセル単位またはパーセントで指定します。WIDTH="300"
WIDTH="80%"
HEIGHT表全体の高さをピクセル単位またはパーセントで指定します。HEIGHT="300"
HEIGHT="80%"

<TR>〜</TR>タグ属性を付けると行ごとに背景をつけたり文字配置を指定することができます。
<TR>〜</TR>タグにつけられる属性
属性説明属性を指定する例
BGCOLOR行全体の背景色を#RGB値またはカラーネームで指定します。BGCOLOR="#FFFF00"
BGCOLOR="red"
ALIGN行全体の文字の横位置を揃えます。属性値は"left"(左揃え)・"center"(中央揃え)・"right"(右揃え)の中から選択します。ALIGN="center"
ALIGN="right"
VALIGN行全体の文字の縦位置を揃えます。属性値は"top"(上部配置)・"middle"(中央)・"bottom"(下部配置)の中から選択します。VALIGN="middle"
VALIGN="bottom"

<TD>〜</TD>タグ属性を付けるとセル(1マス)ごとに背景をつけたり文字配置などを指定することができます。
<TD>〜</TD>タグにつけられる属性
属性説明属性を指定する例
BGCOLORセルの背景色を#RGB値またはカラーネームで指定します。BGCOLOR="#FFFF00"
BGCOLOR="red"
ALIGNセルの文字の横位置を揃えます。属性値は"left"(左揃え)・"center"(中央揃え)・"right"(右揃え)の中から選択します。ALIGN="center"
ALIGN="right"
VALIGNセルの文字の縦位置を揃えます。属性値は"top"(上部配置)・"middle"(中央)・"bottom"(下部配置)の中から選択します。VALIGN="middle"
VALIGN="bottom"
WIDTHセルの幅をピクセル数または表に対するパーセントで指定します。WIDTH="50"
WIDTH="80%"
HEIGHTセルの高さをピクセル数または表に対するパーセントで指定します。
高さはその行の中で最大のものに合わせられます。		HEIGHT="50"
HEIGHT="80%"
ROWSPAN複数行にわたる単一セルを作りたいときその数を指定します。ROWSPAN="2"
COLSPAN複数列にわたる単一セルを作りたいときその数を指定します。COLSPAN="2"

ここで複数の行や列にわたる単一セルとは次のようなセルでより複雑な表を作ることができます。
複数行にわたる単一セルです。複数列にわたる単一セルです。
セル1セル2
これのソースは次のようになります。
<table border=2>
<tr><td rowspan=2>複数行にわたる単一セルです。</td><td colspan=2>複数列にわたる単一セルです。</td></tr>
<tr><td>セル1</td><td>セル2</td></tr>
</table>

文字をスクロールさせてみよう

このテクニックはInternet Explorerでしか使えません。
他のブラウザでは無視されてスクロールされない通常の文字で表示されます。
スクロールしたい部分を<MARQUEE>〜</MARQUEE>で囲みます。
属性説明属性を指定する例
BEHAVIORスクロールの方法を指定します。属性値は
"scroll"(ページを横切る動きを繰り返す)＜デフォルト＞
"slide"(片側からあらわれ端まできたらとまる)
"alternate"(マーキーエリアの中を往復する)
BEHAVIOR="scroll"
BEHAVIOR="slide"
BGCOLORマーキーエリアの背景色を#RGB値またはカラーネームで指定します。BGCOLOR="Red"
BGCOLOR="Blue"
DIRECTIONスクロール方向を指定します。属性値は"left"(右から左)・"right"(左から右)のどちらかを選択します。DIRECTION="left"
DIRECTION="right"
WIDTHマーキーエリアの幅をピクセル数または表に対するパーセントで指定します。WIDTH="50"
WIDTH="80%"
HEIGHTマーキーエリアの高さをピクセル数または表に対するパーセントで指定します。HEIGHT="50"
HEIGHT="80%"