けとけと。の自由帳

サイド自由欄

動画ページ
HOT!まいろ

< 新しい記事

新着記事一覧(全5592件)

過去の記事 >

2004年01月06日

テーブルタグのお話

(7)

テーマ：基礎のHTML(5)

カテゴリ：未整理

TABLE タグ．．．楽天では日記では使えないがトップや左のページには使えるタグ．

もし，初心者で使い方が良くわからないという方，とりあえず見て行ってください．

テーブル関連のタグで

<TABLE>
<TR>
<TD>
<TH>
<CAPTION>
<THEAD>

<TBODY>
<COLGROUP>
<COL>

のタグがありますが楽天で使えるのは

<TABLE>
<TR>
<TD>
<TH>
<CAPTION>

これだけです．

ではそれぞれがどのような役割を果たすか説明して行きましょう．

<TABLE>

<TABLE> ～ </TABLE> までが １つのテーブル（表） であることを定義します．

　＋－－－－－－－－－－－＋
　｜　　　　　　　　　　　｜
　｜　　　　　　　　　　　｜
　｜　　　　　　　　　　　｜
　｜　　　　　表　　　　　｜
　｜　　　　　　　　　　　｜
　｜　　　　　　　　　　　｜
　｜　　　　　　　　　　　｜
　＋－－－－－－－－－－－＋

<TR>

　これは <TR> ～ </TR> １行（横１列） であることを定義します．
<TR> </TR> を複数書けば複数の行が作成できます．

　＋－－－－－－－－－－－＋
　｜　　　　　行　　　　　｜
　＋－－－－－－－－－－－＋
　｜　　　　　行　　　　　｜
　＋－－－－－－－－－－－＋
　｜　　　　　行　　　　　｜
　＋－－－－－－－－－－－＋
　｜　　　　　行　　　　　｜
　＋－－－－－－－－－－－＋

<TD>

　これは <TD> ～ </TD> までが １行の中のセル（個室って感じかな） を定義します．
この中に文字とか画像表示のタグとかを記述していきます．

　　　　　　　表
　＋－－－＋－－－＋－－－＋
　｜セ　ル｜セ　ル｜セ　ル｜←行
　＋－－－＋－－－＋－－－＋
　｜セ　ル｜セ　ル｜セ　ル｜←行
　＋－－－＋－－－＋－－－＋
　｜セ　ル｜セ　ル｜セ　ル｜←行
　＋－－－＋－－－＋－－－＋
　｜セ　ル｜セ　ル｜セ　ル｜←行
　＋－－－＋－－－＋－－－＋

基本形は

<TABLE>
<TR>
<TD> </TD>
</TR>
</TABLE>

です．
これで１つの枠が出来上がります．

※見やすさのために改行して段下げしています．
　自動改行している方は<TD>～</TD>の中以外を改行するとテーブルの上のほうにスペースが広がってしまいます．
　できるだけテーブルタグを使うときは自動改行にしなくて，見やすさのために上のように改行して，半角スペースで段を下げるといいでしょう．

これでもしセルの数を増やしたいとき（横に枠を増やしたいとき）は <TD> </TD> を追加していきます．

行を増やしたいとき（縦に枠を増やしたいとき）は <TR> </TR> の範囲を追加していきます．

　＋－－－＋－－－＋－－－＋
　｜　１　｜・・・｜Ｘ個目｜
　＋－－－＋－－－＋－－－＋
　｜　・　｜　　　｜　　　｜
　｜　・　｜　　　｜　　　｜
　｜　・　｜　　　｜　　　｜
　＋－－－＋－－－＋－－－＋
　｜Ｙ個目｜　　　｜　　　｜
　＋－－－＋－－－＋－－－＋

このように縦横に複数増やす（Ｘ個ｘＹ個の表を作る）には

<TABLE>

<TR>

<TD> </TD> 　←のグループをＸ個書く

　　　　・
　　　　・
　　　　・
</TR>