ケム   HTMLの解説
 なかなか理解しにくいテーブル基本編

HOME

  雑記  
  メモ  
  掲示板  
  SCRIPT  
  HTML  
  ├ 基本  
  ├ 前準備  
  ├ 保存  
  ├ 確認  
  ├ 更新  
  ├ 装飾  
  ├ リンク  
  ├ テーブル  
  ├ テーブル2  
  ├ フレーム  
  └ フレーム2  
  CSS  
  ├ 記述方法  
  ├ CSSファイル  
  └ テキスト  
  リンク  
  メール  
1.テーブルとは

直訳すると表です。直訳しなくても表です。
説明するより見てもらった方が早いですよね。

1列目1行目2列目1行目3列目1行目
1列目2行目2列目2行目3列目2行目

ちなみに横方向が「行」、縦方向が「列」なんです。
それぞれのマスのことをセルといいます。
これだとセルは6個ありますね。
ま。覚えなくても使えるけど知識ってことで知っておいてください。
これのソースはこのようになります。
<TABLE>
  <TR>

    <TD>1列目1行目</TD>
    <TD>
2列目1行目</TD>
    <TD>
3列目1行目</TD>
  </TR>
  <TR>
    <TD>
1列目2行目</TD>
    <TD>
2列目2行目</TD>
    <TD>
3列目2行目</TD>
  </TR>
</TABLE>

これが基本となるテーブルの構造です。

2.タグの解説

では上で書いたタグの説明をしてみましょう。

<TABLE>〜</TABLE>
普通にテーブルの宣言と終了タグです。
いやー。これ以上の説明は難しいわ。

<TR>〜</TR>
この間に挟まれたものが同じ行に入ります。
例ではこれを2組書いてあるんで2行になってますね。

<TD>〜</TD>
この間に挟まれたものが列になります。
例では(1行につき)3組書いてあるんで3列になってますね。

3.色を付けよう

さすがにこのままじゃ味気ないですよね。
ってことで着色してみました。センスない?(汗)

  
   

どうでしょう?少しはきれいになったでしょ。
ってことでソースを公開(笑)
<TABLE border="3" bordercolor="#3333aa" bgcolor="#aaaaaa">
  <TR height="20">
    <TD width="40" bgcolor="#3366cc"></TD>
    <TD width="50"> </TD>
    <TD width="50" bgcolor="#3366cc"> </TD>
  </TR>
  <TR height="25" bgcolor="#3366cc">
    <TD width="50"> </TD>
    <TD width="40"> </TD>
    <TD width="50"> </TD>
  </TR>
</TABLE>


4.また解説

<TABLE border="3" bordercolor="#3333aa" bgcolor="#aaaaaa">
「border」でテーブルの枠の太さを設定してます。
「bordercolor」で枠の色を設定してます。
「bgcolor」で背景の色を設定してます。

<TR height="20">
「height」で高さを設定しています。
「width」で横幅を設定することもできます。

<TD width="40" bgcolor="#3366cc"></TD>
「width」でセルの横幅を設定してます。
「bgcolor」でセルの背景を設定しています。
このセルは中身が何もないんで枠が消えてます。
ってことで他のセルにはダミーで全角スペースが入ってます。

<TR height="25" bgcolor="#3366cc">
ここで背景色を設定すれば行ごと有効になります。

5.結合させたい

セルを結合して大きなセルを作ることも出来るんです。
これを使うとデザインの幅が広がるかも。
とりあえずこんな感じです。

  
    
    
   
    

これは5x4のテーブルを加工したものです。
あの。説明しなきゃダメ?(殴)
とりあえずソースを見てください。
<TABLE border="3" bordercolor="#3333aa" bgcolor="#aaaaaa" height="100" width="150">
  <TR>
    <TD colspan="3"> </TD>
    <TD> </TD>
  </TR>
  <TR>
    <TD> </TD>
    <TD> </TD>
    <TD> </TD>
    <TD> </TD>
  </TR>
  <TR>
    <TD rowspan="2"> </TD>
    <TD> </TD>
    <TD> </TD>
    <TD> </TD>
  </TR>
  <TR>
    <TD> </TD>
    <TD> </TD>
    <TD> </TD>
  </TR>
  <TR>
    <TD> </TD>
    <TD> </TD>
    <TD> </TD>
    <TD> </TD>
  </TR>
</TABLE>

6.結合の説明

<TD colspan="3"> </TD>
「colspan」で行(横)の結合をします。
「rowspan」で列(縦)の結合をします。
この場合、横にセルが4個あるので3個を結合したら2つになりますね。
ってことでこの行(<TR></TR>)に書く<TD></TD>は2組です。
これは行を設定するタグなので次の行は普通に戻ってますよね。

<TD rowspan="2"> </TD>
上で書いたようにこれで列を結合してます。
でもここで大切なのは次の行(<TR></TR>)の記述です。
よく見てもらうと<TD></TD>が3組でしょ。
ここで「rowspan="2"」と書いてるので下の(1番左の)セルも含まれてるんです。
ここでは2で設定してあるんで5行目はセルが4つに戻っています。


△ 上へ △

HOME  | 雑記  | メモ  | 掲示板  | SCRIPT  | HTML  | リンク  | メール