2004.12.07
カテゴリ： カテゴリ未分類
デュラン！ロード＝シルバーカードリッジ…！！ てぇ――っ！！（挨拶）
というわけで、今日はなんとなくサイト作成などを行っているサイトさんに向けてのタグ講座。
と言ってもそんなに大層なものでもないんですけどね…（苦笑）。
トップページを作るのや、僕のサイトの左下のリンクページみたいに拘ってみたりとか…。
いろいろなことに重点をおいて、今回は語ってみようかと…。
あ～…ちなみにタグやトップページなんかに全然関心の無い人は無視しちゃってください（苦笑）。
この日記見ても面白くもなんともないですから（いつも面白く無いですけど…悲）。
■テーブル■
さて、テーブル（TABLE）。
まぁ…一般的に少しでも見た目を重視したいなら使わないではいられないタグの一つですね。
まぁ…一部のサイトのように、逆にテーブルなどを極力使わないで、シンプルに攻めるもの綺麗なのでＯＫでしょう。
あくまでテーブルを使う人へのタグ講座ですｗ
テーブルは基本的に縦に使用するというよりは、横に使用するのが主流です。
まぁ…縦に分裂させる方法を取るのも当然ありますが、横長になるのが大体だと思います。
さて…さっそくタグ講座ということなのでタグを…。
ちなみに ＜＞は全て『全角』になっています。実際使用するときには半角の<>に直してご使用ください。
まずテーブルタグの基本からお教えします。
まぁ…最初が＜Table＞なのはいいとして、そのあとの付属などの説明。
＜Table border="○" width="×" height="△" bgcolor="□"＞
がテーブルタグの最初の大体の基本形となります。
borderというのはテーブル周りの 枠線の太さ
『０』にするとテーブル周りの枠線が消えます。
width・heightというのはもう使っている人は余裕で分かりますね。widthが横、heightが縦の長さです。
bgcolorというのは テーブル全体の色 。まぁ…枠線の色…とでも思ってください。
基本的にはbgcolorを設定しないと背景が透けます（僕のサイトのように）。
ここからが重要。
まず＜Table＞タグのあとにつける＜tr＞＜td＞。
＜tr＞というのは縦の段を表します。まぁ… 『改行』 とでも覚えてしまってください。
そして＜td＞というのが＜tr＞行の中の横の段。ちゃんと段が終了するたびにタグ閉じて（＜/td＞）ください
こちらにはテーブルと同じように中にさらにタグを使いする場合が多いです。
こちらに使用できないのは『border』です。これだけはTableタグにしか使用することはできません。
図に表すと分かりやすいので示します。
＜Table border="1" width="300" height="150"＞
＜tr＞
＜td width="100" height="50"＞TD1-1＜/td＞
＜td width="100" height="50"＞TD1-2＜/td＞
＜td width="100" height="50"＞TD1-3＜/td＞
＜/tr＞
＜tr＞
＜td width="100" height="50"＞TD2-1＜/td＞
＜td width="100" height="50"＞TD2-2＜/td＞
＜td width="100" height="50"＞TD2-3＜/td＞
＜/tr＞
＜tr＞
＜td width="100" height="50"＞TD3-1＜/td＞
＜td width="100" height="50"＞TD3-2＜/td＞
＜td width="100" height="50"＞TD3-3＜/td＞
＜/tr＞
＜/Table＞
というのを実際に入力してみると…（ちなみに本来は上記のタグの間は改行しないでください）
というようになります（左のＴＲは個人的につけたしたものです。実際には表示されません）。
ＴＲというのが縦の段、その中に存在するのがＴＤという横の段というわけです。
どうです？これさえ理解してしまえばなんとなくいろいろ作れそうな気がしませんか？
さて…では少し応用編といきますか。
よくある質問だったりするわけでもないのですが、妙にできないと思っている人のために解説。
という上のテーブルと、下の
というテーブルを横並び同士に並べたい…つまりは、
のようにしたいのに出来ないという質問。まぁ…上記の場合は別に一つのテーブルの中に４つＴＤを作って、
最初にＴＲ、あとにＴＤを入れれば作成できるのですが、もし下記のような場合ですとどうでしょう？
まぁ…たしかに
というように作成することもできますが、これはcolspan、rowspanという難しいタグを利用して『結合』というものを行っています。
いきなりこんなことをやれと言われてもできるものではないので、もっと簡単な方法を。
この画像が最初の方の画像と何が違うのか気付きましたか？
先ほどの繋げている画像（上から４つめの画像）の周りにさらに横に二分割されたテーブルが見えると思います。
もう分かりましたか？二つに横分割されているテーブルの中に、横に並べたいテーブルを入れただけなんですよ。
僕のトップにも大量に使われています。どうです？分かりましたか？
なので無理に結合なんてしなくてもいいんです。あとは周りのテーブルのタグのborderを0にすれば見えなくなって完成。
上から４つめの形が出来上がるというわけです。ご理解いただけたでしょうか？（苦笑）
■テーブルタグ・終了■
というわけで、今日はなんとなくサイト作成などを行っているサイトさんに向けてのタグ講座。
と言ってもそんなに大層なものでもないんですけどね…（苦笑）。
トップページを作るのや、僕のサイトの左下のリンクページみたいに拘ってみたりとか…。
いろいろなことに重点をおいて、今回は語ってみようかと…。
あ～…ちなみにタグやトップページなんかに全然関心の無い人は無視しちゃってください（苦笑）。
この日記見ても面白くもなんともないですから（いつも面白く無いですけど…悲）。
■テーブル■
さて、テーブル（TABLE）。
まぁ…一般的に少しでも見た目を重視したいなら使わないではいられないタグの一つですね。
まぁ…一部のサイトのように、逆にテーブルなどを極力使わないで、シンプルに攻めるもの綺麗なのでＯＫでしょう。
あくまでテーブルを使う人へのタグ講座ですｗ
テーブルは基本的に縦に使用するというよりは、横に使用するのが主流です。
まぁ…縦に分裂させる方法を取るのも当然ありますが、横長になるのが大体だと思います。
さて…さっそくタグ講座ということなのでタグを…。
ちなみに ＜＞は全て『全角』になっています。実際使用するときには半角の<>に直してご使用ください。
まずテーブルタグの基本からお教えします。
まぁ…最初が＜Table＞なのはいいとして、そのあとの付属などの説明。
＜Table border="○" width="×" height="△" bgcolor="□"＞
がテーブルタグの最初の大体の基本形となります。
borderというのはテーブル周りの 枠線の太さ
『０』にするとテーブル周りの枠線が消えます。
width・heightというのはもう使っている人は余裕で分かりますね。widthが横、heightが縦の長さです。
bgcolorというのは テーブル全体の色 。まぁ…枠線の色…とでも思ってください。
基本的にはbgcolorを設定しないと背景が透けます（僕のサイトのように）。
ここからが重要。
まず＜Table＞タグのあとにつける＜tr＞＜td＞。
＜tr＞というのは縦の段を表します。まぁ… 『改行』 とでも覚えてしまってください。
そして＜td＞というのが＜tr＞行の中の横の段。ちゃんと段が終了するたびにタグ閉じて（＜/td＞）ください
こちらにはテーブルと同じように中にさらにタグを使いする場合が多いです。
こちらに使用できないのは『border』です。これだけはTableタグにしか使用することはできません。
図に表すと分かりやすいので示します。
＜Table border="1" width="300" height="150"＞
＜tr＞
＜td width="100" height="50"＞TD1-1＜/td＞
＜td width="100" height="50"＞TD1-2＜/td＞
＜td width="100" height="50"＞TD1-3＜/td＞
＜/tr＞
＜tr＞
＜td width="100" height="50"＞TD2-1＜/td＞
＜td width="100" height="50"＞TD2-2＜/td＞
＜td width="100" height="50"＞TD2-3＜/td＞
＜/tr＞
＜tr＞
＜td width="100" height="50"＞TD3-1＜/td＞
＜td width="100" height="50"＞TD3-2＜/td＞
＜td width="100" height="50"＞TD3-3＜/td＞
＜/tr＞
＜/Table＞
というのを実際に入力してみると…（ちなみに本来は上記のタグの間は改行しないでください）
| TR |
|---|
| TR |
| TR |
| TD1-1 | TD1-2 | TD1-3 |
|---|---|---|
|
TD2-1
|
TD2-2 | TD2-3 |
|
TD3-1
|
TD3-2 | TD3-3 |
というようになります（左のＴＲは個人的につけたしたものです。実際には表示されません）。
ＴＲというのが縦の段、その中に存在するのがＴＤという横の段というわけです。
どうです？これさえ理解してしまえばなんとなくいろいろ作れそうな気がしませんか？
さて…では少し応用編といきますか。
よくある質問だったりするわけでもないのですが、妙にできないと思っている人のために解説。
| TR |
|---|
| TR |
| TR |
という上のテーブルと、下の
TD1-1
TD1-2
TD1-3
TD2-1
TD2-2
TD2-3
TD3-1
TD3-2
TD3-3
というテーブルを横並び同士に並べたい…つまりは、
| TR |
|---|
| TR |
| TR |
| TD1-1 | TD1-2 | TD1-3 |
|---|---|---|
|
TD2-1
|
TD2-2 | TD2-3 |
|
TD3-1
|
TD3-2 | TD3-3 |
のようにしたいのに出来ないという質問。まぁ…上記の場合は別に一つのテーブルの中に４つＴＤを作って、
最初にＴＲ、あとにＴＤを入れれば作成できるのですが、もし下記のような場合ですとどうでしょう？
TR
TD1-1
TD1-2
TD1-3
TD2-1
TD2-2
TD2-3
TD3-1
TD3-2
TD3-3
まぁ…たしかに
ＴＲ
TD1-1
TD1-2
TD1-3
TD2-1
TD2-2
TD2-3
TD3-1
TD3-2
TD3-3
というように作成することもできますが、これはcolspan、rowspanという難しいタグを利用して『結合』というものを行っています。
いきなりこんなことをやれと言われてもできるものではないので、もっと簡単な方法を。
| TR |
|---|
| TR |
| TR |
| TD1-1 | TD1-2 | TD1-3 |
|---|---|---|
|
TD2-1
|
TD2-2 | TD2-3 |
|
TD3-1
|
TD3-2 | TD3-3 |
この画像が最初の方の画像と何が違うのか気付きましたか？
先ほどの繋げている画像（上から４つめの画像）の周りにさらに横に二分割されたテーブルが見えると思います。
もう分かりましたか？二つに横分割されているテーブルの中に、横に並べたいテーブルを入れただけなんですよ。
僕のトップにも大量に使われています。どうです？分かりましたか？
なので無理に結合なんてしなくてもいいんです。あとは周りのテーブルのタグのborderを0にすれば見えなくなって完成。
上から４つめの形が出来上がるというわけです。ご理解いただけたでしょうか？（苦笑）
■テーブルタグ・終了■
お気に入りの記事を「いいね！」で応援しよう
おいこらちょっと待て
涼宮 茜
さん
ＴＯＰのあれはなんですか？
我が敬愛なる先輩をカレー扱いなど言語道断！！
しかも、僕が君の志貴に勝たなきゃ直らないってどういうことですか！？
不可能なことを言うんじゃありません！！
家で練習できない僕に一体どうしろと？ (2004.12.07 21:38:52)
我が敬愛なる先輩をカレー扱いなど言語道断！！
しかも、僕が君の志貴に勝たなきゃ直らないってどういうことですか！？
不可能なことを言うんじゃありません！！
家で練習できない僕に一体どうしろと？ (2004.12.07 21:38:52)
ヽ(ﾟ▽ﾟ*)ﾉｼ わぁい♪
うたまる3276
さん
TOP改装の時に使います。
テーブルを使うときれいに見えていいですよね。
あるとないとでは大違いですよ。
確かにHP作成している人以外には面白くはないと
思いますが、いつもの日記は面白いですよ。
（特に神無月の巫女があった日の）
(2004.12.07 22:27:02)
テーブルを使うときれいに見えていいですよね。
あるとないとでは大違いですよ。
確かにHP作成している人以外には面白くはないと
思いますが、いつもの日記は面白いですよ。
（特に神無月の巫女があった日の）
(2004.12.07 22:27:02)
おぉ！
takashi’s
さん
Re:タグ講座(12/07)
ゴットバレー
さん
このテーブル
祖茶
さん
おぉ～・・・
†隼人†
さん
ついにテーブルのタグ講座・・・。
遂に・・・遂に始動ですかっっ？（何を
いや～なかなかTOP完成しませんよ・・・。
時間もありませんし・・・。
TOP、もうちょっと改造してみます。
borderを消す・・・ですね？
その予定なんですが、
あの中にもうちょっとテーブルを加えるかどうか悩んでますｗ
多分入れないでしょうけど・・・ｗ
(2004.12.08 18:50:34)
遂に・・・遂に始動ですかっっ？（何を
いや～なかなかTOP完成しませんよ・・・。
時間もありませんし・・・。
TOP、もうちょっと改造してみます。
borderを消す・・・ですね？
その予定なんですが、
あの中にもうちょっとテーブルを加えるかどうか悩んでますｗ
多分入れないでしょうけど・・・ｗ
(2004.12.08 18:50:34)
【毎日開催】
15記事にいいね！で1ポイント
© Rakuten Group, Inc.
