"table"
"テーブルは本来、表を作るためのもので、レイアウトに使うなんて邪道"という意見もあります。
確かに、そう言えなくもないのですが、スタイルシート(一言で言ってしまえば、専ら"レイアウト専用"に使用する(HTMLとは別物の)'記号')を十分にサポートしているブラウザ(現時点ではIE4以上のみ(NN3ではただ無視されるだけですが、NC4, IE3はスタイルシートを使うとうまくレイアウトされない(特にIE3の場合、"悲惨な結果"になることも・・・))をメインに使っている人が全体の約1/3(2000年4月現在)の現在、"テーブルでレイアウト"というのも"やむをえない選択"と言えるのではないでしょうか。
というわけで、ここでは、"本来の表組"と"表組を応用したレイアウト"の両方について解説したいと思います。
"表"を書くには、最低、<TABLE>タグ、<TH>タグ(または<TD>タグ)及び<TR>タグが必要です。
("<TR>"は省略される場合もありますが、本来は)
・・・基本形(横一列の表)は、次のようになります。
・・・これだけでも"立派な表"ですが、ふつうは表は2列以上で枠を付けるので、(その場合は)次のように書きます。
ex) ("<FONT COLOR>"は省略しています)
<TABLE BORDER="1"><TR><TH></TH><TH>寒色系</TH>
<TH>暖色系</TH></TR>
<TR><TH>私の好きな色</TH><TD>ブルー、グリーン</TD>
<TD>イタリアンレッド</TD></TR>
<TR><TH>きらいな色</TH><TD>ネイビーブルー</TD>
<TD>ショッキングピンク</TD></TR></TABLE>
↓
| 寒色系 | 暖色系 | |
|---|---|---|
| 私の好きな色 | ブルー、グリーン | イタリアンレッド |
| きらいな色 | ネイビーブルー | ショッキングピンク |
"基本形"では、表の"背景色(または画像)"はページのそれと同じ、枠は"陰影のあるグレー"、テーブル(全体)やセルの大きさは"中身"のテキスト(またはイメージ)に依存していますが、それでは見づらかったり、"見映えが・・・"だったりするので、以下のオプションを使って調節します。
(テーブル全体に有効)
<TABLE ALIGN="p">
テーブルの位置を左寄せ(p＝LEFT)または右寄せ(p＝RIGHT)にします。
(Note: "中央揃え"(p=center)も一応有効ということになっているのですが、サポートしていないブラウザーが多いので、
<center>タグ(<TABLE>～</TABLE>の外側に書く)を使用して下さい)
(∗: ピクセル数)
テーブルの枠の太さを変えます。
(デフォルト: "<TABLE CELLPADDING="0">と<TABLE CELLPADDING="1">の間"(各自"ローカルテスト"してみて下さい))
(∗: ピクセル数)
テーブルの枠と内部のテキストの間隔を変えます。
(デフォルト: "<TABLE CELLSPACING="0">と<TABLE CELLSPACING="1">の間"(各自"ローカルテスト"してみて下さい))
(∗: ピクセル数)
テーブルの幅を変えます。(%でもOKですが、ウインドウの大きさによって長さが変わります)
(Note: ピクセル数で指定する場合、テーブルの幅によっては、横スクロールして見づらくなることがあるので、注意して下さい。
(特にテキストの場合))
(∗: ピクセル数)
テーブルの高さを変えます。(%でもOKですが、ウインドウの大きさによって高さが変わります)
(x: 0～9またはa～f "color name": 任意の色)
すべてのセルの色を変えます。(ネットスケープVer.3, IE2以上有効; 色の指定は"BODY BGCOLOR"と全く同じ
(NN3では表示が変になることもあります))
または<TABLE BACKGROUND="file name.jpg">
("file name": 背景パターンに使いたいイメージのファイル名)
すべてのセル内に背景パターンを表示します。(ネットスケープVer.4, IE3以上有効)
(Note: <TABLE BGCOLOR>,<TABLE BACKGROUND>共、バージョンによっては、無効だったり、(両方指定した場合)どちらが優先で表示されるかが異なるので、十分注意して使用して下さい)
または<TABLE BORDERCOLOR="color name">
(x: 0～9またはa～f "color name": 任意の色)
テーブル枠の陰影部分全体の色を指定します。(NC4, IE3以上有効)
(Note: NCでは"陰影付き"、IEでは"平坦"に見えます)
または<TABLE BORDERCOLORLIGHT="color name">
(x: 0～9またはa～f "color name": 任意の色)
テーブル枠の陰影の明るい部分の色を指定します。(IE3以上有効)
または<TABLE BORDERCOLORDARK="color name">
(*: 0～9またはa～f "color name": 任意の色)
テーブル枠の陰影の暗い部分の色を指定します。(IE3以上有効)
ex) sample (見終わった後は、ブラウザーの「Back」ボタンで戻って下さい)
(こちらは、"表"ではなく、"TABLEを使ったレイアウト"になります)
(指定したセルの列全体に有効)
<TR ALIGN="p">
セル内のテキスト(またはイメージ)の位置を左寄せ(p＝LEFT)、右寄せ(p＝RIGHT)または中央揃え(p＝center)にします。
(セルの大きさによっては無効のこともあります)
セル内のテキスト(またはイメージ)の位置を"上寄せ"(p＝TOP)、"下寄せ"(p＝BOTTOM)または(垂直方向に)"中央揃え"(p=MIDDLE)にします。
(セルの大きさによっては無効のこともあります)
(指定したセルのみ有効)
<TH ALIGN="p">
<TD ALIGN="p">
セル内のテキスト(またはイメージ)の位置を左寄せ(p＝LEFT)、右寄せ(p＝RIGHT)または中央揃え(p＝center)にします。
(セルの大きさによっては無効のこともあります)
<TD VALIGN="p">
セル内のテキスト(またはイメージ)の位置を"上寄せ"(p＝TOP)、"下寄せ"(p＝BOTTOM)または(垂直方向に)"中央揃え"(p=MIDDLE)にします。
(セルの大きさによっては無効のこともあります)
<TD NOWRAP>
セル内でテキストが折り返されないようにします。
(ブラウザのウインドウの大きさによっては無効のこともあります)
<TD WIDTH="*">
(*: ピクセル数)
セルの幅を変えます。(%でもOKですが、ウインドウの大きさによって長さが変わります)
<TD HEIGHT="*">
(*: ピクセル数)
セルの高さを変えます。(%でもOKですが、ウインドウの大きさによって高さが変わります)
<TD BGCOLOR="#xxxxxx">または<TD BGCOLOR="color name">
(x: 0～9またはa～f "color name": 任意の色)
セル内の色を変えます。(ネットスケープVer.3, IE2以上有効; 色の指定は"BODY BGCOLOR"と全く同じ
(NN3では表示が変になることもあります))
または<TH BACKGROUND="file name.jpg">
<TD BACKGROUND="file name.gif">
または<TD BACKGROUND="file name.jpg">
("file name": 背景パターンに使いたいイメージのファイル名)
セル内に背景パターンを表示します。(ネットスケープVer.4, IE3以上有効)
(Note: <TH(or TD) BGCOLOR>,<TH(or TD) BACKGROUND>共、バージョンによっては、無効だったり、
(両方指定した場合)どちらが優先で表示されるかが異なるので、十分注意して使用して下さい)
<TD COLSPAN="∗">
("∗": 2以上の整数)
横方向に複数のセルをまとめて一つ(のセル)にします。
<TD ROWSPAN="∗">
("∗":nbsp;2以上の整数)
縦方向に複数のセルをまとめて一つ(のセル)にします。
(p: 位置)