けとけと。の自由帳

サイド自由欄

動画ページ
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>

↑のグループをＹ個書く
　　・
　　・
　　・

</TABLE>

といった感じに記述します．

とりあえず今日はここまで．
わかったかな？

残りの説明はまた後日m(__)m

お気に入りの記事を「いいね！」で応援しよう

最終更新日 2004年01月07日 15時49分23秒コメント(7) | コメントを書く

■コメント

Re:テーブルタグのお話(1/6)

ηёηё★彡さん

(*゜_っ゜)ﾉﾞはよ♪<br><br>まったりさん説明上手ね～～～<br>ここまで詳しくやってくれるんだもん<br>ありがたや・・・・(｡_｡*(ﾟДﾟ*)ﾝﾀﾞ!<br><br>(　　　＜((●))＞　_　＜((●))＞　　)ｼﾞｨｰｯ<br>壁紙がサルだわ～～～～<br>って今頃遅いって？<br>(*ﾟ∀ﾟ)ｱﾋｬﾋｬﾋｬﾋｬﾋｬﾋｬﾋｬﾋｬﾋｬ<br><br>↑のペンギンはサルにはならんのけ？<br>ヾ(( ゜)д( ゜))ノイヒヒヒヒー♪<br> (2004年01月07日 08時17分57秒)

返事を書く

Re:テーブルタグのお話(1/6)

kirara☆彡さん

おはよ＾＾☆<br><br>テーブルタグ・・・使っているけど・・・<br>よくわかってない。　(〃^∇^)o_彡☆あははははっ<br><br>なんだか・・・<br>やっているうちに出来上がって・・・<br>二度とできないかも。。。<br><br>困った・・おばさんです。<br>お勉強しますね。<br><br>今日も・・元気でね☆ (2004年01月07日 08時22分50秒)

返事を書く

Re:テーブルタグのお話(1/6)

meiakira さん

おはようございます（*^_^*）<br><br>前にテーブルの中にテーブルで作ったものを並べるのに苦労しました。<br>頭が混乱してきちゃって～・・・<br>ごちゃごちゃ触ってるうちに、うまくいきましたがσ(^◇^；)<br><br>←左の（空き）の文字が寂しいです(_ _。)・・・ｼｭﾝ (2004年01月07日 09時12分20秒)

返事を書く

Re:テーブルタグのお話(1/6)

hiroto1978 さん

うんうん。<br>そうそう、こういう初歩的の期待してました♪<br>ほんと、情けなくてすんません。<br>勉強しろよっって多分、上級者の方は思うんでしょうけど、なかなか。。。言い訳してるのもなんなんで、一つ一つ学んでいこうとおもいますので、今年もよろしくです。 (2004年01月07日 09時51分06秒)

返事を書く

Re:テーブルタグのお話(1/6)

シオンj さん

そ、　そうなんです。<br>テーブル　作りたかったんです。<br>有難いです。<br>今日の読んで～～～～～まだ　(ーー;)<br><br>次　読ませていただいてやってみなくては～ね。<br><br> (2004年01月07日 10時03分11秒)

返事を書く

Re:テーブルタグのお話(1/6)

シュガリー☆ さん

テーブル関連のタグは、たくさんあるのですね。<br>楽天で使えるのしか知りませんでした。<br><br>すごくわかりやすい説明ですね。<br>φ（．．）カキカキ<br> (2004年01月07日 12時59分49秒)

返事を書く

Re:テーブルタグのお話(1/6)

アビさん

こんにちは<br>テーブルタグのお話し・・・初日はクリアしました<br>（＾＾）<br>この調子で、今後もお勉強しに伺います。<br><br>何卒　宜しくです。<br> (2004年01月07日 15時49分23秒)