home
information

for contents

how-to HTML files

default layout

browsers

pictures

table

frame
upload
tags

form
bbs
HP Guide for Beginners(タイトルロゴ)

["table"]

"テーブルは本来、表を作るためのもので、レイアウトに使うなんて邪道"という意見もあります。---確かに、そう言えなくもないのですが、スタイルシート(一言で言ってしまえば、専ら"レイアウト専用"に使用する(HTMLとは別物の)'記号')を十分にサポートしているブラウザ(現時点ではIE4以上のみ(NN3ではただ無視されるだけですが、NC4, IE3はスタイルシートを使うとうまくレイアウトされない(特にIE3の場合、"悲惨な結果"になることも・・・))をメインに使っている人が全体の約1/3(2000年4月現在)の現在、"テーブルでレイアウト"というのも"やむをえない選択"と言えるのではないでしょうか。

---というわけで、ここでは、"本来の表組"と"表組を応用したレイアウト"の両方について解説したいと思います。



    tableライティング

    "<table>オプション"

    "<TR>, <TH>, <TD>オプション"


〔tableライティング〕

"表"を書くには、最低、<TABLE>タグ、<TH>タグ(または<TD>タグ)及び<TR>タグが必要です。
("<TR>"は省略される場合もありますが、本来は)

---基本形(横一列の表)は、次のようになります。

<TABLE>
<TR><TH>~</TH><TD>~</TD></TR>
</TABLE>
 <TABLE>~</TABLE>
   (枠なし)テーブル(表組み)を定義するタグ。

 <TH>~</TH>
   見出しを付けるタグ。(太字・中央揃えになります)       

 <TD>~</TD>
   セルを定義するタグ。

 <TR>~</TR>
   列を定義するタグ。(</TR>は省略可)

 ~:任意のテキスト(またはイメージ)

---これだけでも"立派な表"ですが、ふつうは表は2列以上で枠を付けるので、(その場合は)次のように書きます。

<TABLE BORDER="*">
<TR><TH></TH><TH>~</TH><TH>~</TH></TR>
<TR><TH>~</TH><TD>~</TD><TD>~</TD></TR>
</TABLE>
 <TABLE>~</TABLE>
 <TABLE BORDER="*">~</TABLE>
  (*: ピクセル数)
   枠ありテーブルを定義するタグで、数値が大きいほど立体的になります。
   (指定しない時("デフォルト"): 1ピクセル)

 ("<TH></TH>"のように"中身"を空にすると、その部分だけ凹んで表示されます)













  ex) ("<FONT COLOR>"は省略しています)

   <TABLE BORDER="3"><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> オプション")
  (テーブル全体に有効)

  <TABLE ALIGN="p">
   テーブルの位置を左寄せ(p=LEFT)または右寄せ(p=RIGHT)にします。
   (Note: "中央揃え"(p=center)も一応有効ということになっているのですが、サポートしていないブラウザが多いので、
   <center>タグ(<TABLE>~</TABLE>の外側に書く)を使用して下さい)


  <TABLE CELLPADDING="*">
   (*: ピクセル数)
   テーブルの枠の太さを変えます。(デフォルト: "<TABLE CELLPADDING="0">と<TABLE CELLPADDING="1">の間"
   (各自"ローカルテスト"してみて下さい))

  <TABLE CELLSPACING="*">
   (*: ピクセル数)
   テーブルの枠と内部のテキストの間隔を変えます。(デフォルト: "<TABLE CELLSPACING="0">と
   <TABLE CELLSPACING="1">の間"(各自"ローカルテスト"してみて下さい))
  <TABLE WIDTH="*">
   (*: ピクセル数)
   テーブルの幅を変えます。(%でもOKですが、ウインドウの大きさによって長さが変わります)
   (Note: ピクセル数で指定する場合、テーブルの幅によっては、横スクロールして見づらくなることがあるので、
   注意して下さい(特にテキストの場合))


  <TABLE HEIGHT="*">
   (*: ピクセル数)
   テーブルの高さを変えます。(%でもOKですが、ウインドウの大きさによって高さが変わります)

  <TABLE BGCOLOR="#******">または<TABLE BGCOLOR="color name">
   (*: 0~9またはa~f "color name": 任意の色)
   すべてのセルの色を変えます。(ネットスケープVer.3, IE2以上有効; 色の指定は"BODY BGCOLOR"と全く同じ
   (NN3では表示が変になることもあります))

  <TABLE BACKGROUND="file name.gif">または<TABLE BACKGROUND="file name.jpg">
   ("file name": 背景パターンに使いたいイメージのファイル名)
   すべてのセル内に背景パターンを表示します。(ネットスケープVer.4, IE3以上有効)

   (Note: <TABLE BGCOLOR>,<TABLE BACKGROUND>共、バージョンによっては、無効だったり、
   (両方指定した場合)どちらが優先で表示されるかが異なるので、十分注意して使用して下さい)

  <TABLE BORDERCOLOR="#******">または<TABLE BORDERCOLOR="color name">
   (*: 0~9またはa~f "color name": 任意の色)
   テーブル枠の陰影部分全体の色を指定します。(NC4, IE3以上有効)
   (Note: NCでは"陰影付き"、IEでは"平坦"に見えます)

  <TABLE BORDERCOLORLIGHT="#******">
  または<TABLE BORDERCOLORLIGHT="color name">
   (*: 0~9またはa~f "color name": 任意の色)
   テーブル枠の陰影の明るい部分の色を指定します。(IE3以上有効)

  <TABLE BORDERCOLORDARK="#******">
  または<TABLE BORDERCOLORDARK="color name">
   (*: 0~9またはa~f "color name": 任意の色)
   テーブル枠の陰影の暗い部分の色を指定します。(IE3以上有効)

  ex) sample (見終わった後は、ブラウザのバックボタンで戻って下さい)
    (こちらは、"表"ではなく、"TABLEを使ったレイアウト"になります)


 ("<TR> オプション")
  (指定したセルの列全体に有効)

  <TR ALIGN="p">
   セル内のテキスト(またはイメージ)の位置を左寄せ(p=LEFT)、右寄せ(p=RIGHT)または中央揃え(p=center)にします。
   (セルの大きさによっては無効のこともあります)

  <TR VALIGN="p">
   セル内のテキスト(またはイメージ)の位置を"上寄せ"(p=TOP)、"下寄せ"(p=BOTTOM)または(垂直方向に)
   "中央揃え"(p=MIDDLE)にします。
   (セルの大きさによっては無効のこともあります)


 ("<TH>, <TD> オプション")
  (指定したセルのみ有効)

  <TH ALIGN="p">
  <TD ALIGN="p">
   セル内のテキスト(またはイメージ)の位置を左寄せ(p=LEFT)、右寄せ(p=RIGHT)または中央揃え(p=center)にします。
   (セルの大きさによっては無効のこともあります)

  <TH VALIGN="p">
  <TD VALIGN="p">
   セル内のテキスト(またはイメージ)の位置を"上寄せ"(p=TOP)、"下寄せ"(p=BOTTOM)または(垂直方向に)
   "中央揃え"(p=MIDDLE)にします。
   (セルの大きさによっては無効のこともあります)

  <TH NOWRAP>
  <TD NOWRAP>
   セル内でテキストが折り返されないようにします。
   (ブラウザのウインドウの大きさによっては無効のこともあります)

  <TH WIDTH="*">
  <TD WIDTH="*">
   (*: ピクセル数)
   セルの幅を変えます。(%でもOKですが、ウインドウの大きさによって長さが変わります)

  <TH HEIGHT="*">
  <TD HEIGHT="*">
   (*: ピクセル数)
   セルの高さを変えます。(%でもOKですが、ウインドウの大きさによって高さが変わります)

  <TH BGCOLOR="#******">または<TH BGCOLOR="color name">
  <TD BGCOLOR="#******">または<TD BGCOLOR="color name">
   (*: 0~9またはa~f "color name": 任意の色)
   セル内の色を変えます。(ネットスケープVer.3, IE2以上有効; 色の指定は"BODY BGCOLOR"と全く同じ
   (NN3では表示が変になることもあります))

  <TH BACKGROUND="file name.gif">または<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>共、バージョンによっては、無効だったり、
   (両方指定した場合)どちらが優先で表示されるかが異なるので、十分注意して使用して下さい)


  ex) sample 2

  <TH COLSPAN="*">
  <TD COLSPAN="*">
   ("*": 2以上の整数)
   横方向に複数のセルをまとめて一つ(のセル)にします。

  <TH ROWSPAN="*">
  <TD ROWSPAN="*">
   ("*": 2以上の整数)
   縦方向に複数のセルをまとめて一つ(のセル)にします。


 (("その他"))

  <CAPTION ALIGN="p">~</CAPTION>
   (p: 位置)
   表の上部中央(p=top)、下部中央(p=bottom)、上部左側(p=left(IEのみ有効))
   または上部右側(p=right(IEのみ有効))にタイトルを付けます。
   (<TABLE>の直後に記述して下さい)

  ex) sample 3



→Next 


Copyright 1998-2018 (C) "Opal" All Rights Reserved.