|
|
|
2004年09月17日
カテゴリ：カテゴリ未分類
さて、今日はテンプレートによく使われる、テーブルのお勉強。 昨日、漁師が龍にレッスンした内容をお話ししよう。 こんなテーブルのHTMLなんて、かったるい知識、はたして役に立つのか？ 立つんである。 あなたは、お気に入りのテンプレートを見て、 ああ、背景色はこんなのがあればいいのに、と思ったことはないだろうか。 もう一段あればいいのにとか、あるいは減らしたいとか．．． そんな望みが叶うのだ、しかも、ビルダーなしで。 道は遠いが、得られる果実は甘い。 テーブルのHTMLは金魚のウンコ状態になっている。 やたら長い。 そのままでは、なかなか取っつきにくい。 だから、これをこま切れにして、にゃんこのウンコ状態にして観察しよう。 コロコロしていて、扱いやすい．．．．か？ テーブルに使うタグは３つ。 <table>、<tr>、<td>の３つを覚えておけば、まず間に合う。 そのほか、いくつかパラメータも必要だが、ぼちぼちやればよい。 HTMLは開始タグと終了タグで挟んで使うのであった。 覚えておられるかな？ <table></table> こう書けば、あっさり、テーブルのいっちょ上がりである。 中身がないので、当然、何も表示されない。 ならば、中身を書こう。 とりあえず、１行分入れてみる。 行を表すのは<tr>タグなのでこうなる。 <table><tr></tr></table> これに、<td>と</td>を放り込んで、ひとマス分の枠を作る。 これが、列に当たる部分だ。 <table><tr><td></td></tr></table> これで、テーブルを構成するタグは、早くも出つくした。 まだ、からっぽなので、とりあえず、「ネコ」とでも入れてみるか。 <table><tr><td>ネコ</td></tr></table> これで、やっと「ネコ」と表示できるようになった。 しかし、これでは「表」でござい、と名乗るにはおこがましい。 １行１列の表なんて、あまり出番はなさそうだ。 では、２列にして、イヌ、と入れてみよう。 <table><tr><td>ネコ</td><td>イヌ</td></tr></table> ３列目にウサギを入れたければ、バカ正直に並べればよい。 <table><tr><td>ネコ</td><td>イヌ</td><td>ウサギ</td></tr></table> ほーら、だんだん、金魚のウンコになってきた。 ややこしく見えるテーブルとて、実は単純なルールで書かれている。 それが、長々と続いているから難しそうに見えるだけのことだ。 <tr>から</tr>までが、ひとつの行である。 その中に<td>と</td>で囲まれたセットがいくつあるかで、マスの数が決まる。 実際のデータ、つまり文章や画像URLは<td>と</td>の間に書くわけだ。 ↓
しかし、これでは罫線が表示されない。 仕方がない。 ここで、テーブルの呪文を唱えよう。 <table>タグに border="1" という呪文(パラメータ)を追加する。 <table border="1"><tr><td>ネコ</td><td>イヌ</td><td>ウサギ</td></tr></table> ↓
１段しかないが、なんとなく、表っぽくなった。 <tr>から</tr>までのセットを増やせば、何段にでも増やせる。 削れば減らせる。 これが、テーブル作成の基本である。 何が何でも全部、暗記しろとは言わない。 重要なことは、どのマスが、どの<td>～</td>に対応しているか、 分かるようになることである。 これは地図が読めるようになることに等しい。 理解すれば、あなたは、突如として開眼するのだ。 そして、叫ぶ。 「そうか、わかったぁ～っ！」 そして、悪魔のよだれをたらすであろう。 「むふふ、このテンプレート、おいしそう．．．」 この記事がおもしろかったと思う人は１票！ クリック →  【今日のポイント】 １．テーブル攻略は<table>、<tr>、<td>の３つのタグを覚える ２．<tr>と</tr>の間にあるものは１行分のデータ。 これを増やせば何段でも増やせる。 先に書いたものほど上になる。 ３．<td>と</td>に挟まれているのが表示データ。文章でも画像URLでもよい。 このセットを増やせばマスが増える。 先に書いたものほど左に来る。 ４．罫線を表示するには border="1" 、非表示にするには、 border="0" を <table>タグに追加する。 【おわび】 冒頭にあった、くだらないネタは削除しました。 コメントをくださったみなさま、ごめんなさい。 純粋なバカネコ講座にしました。 ネコでもわかる バカネコ講座はこちら。 →超初心者ＰＣ講座 笑って楽しみたい方はこちら → 爆笑ガイド パソコン買い替えの前にチェック → 費用の削り方 画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 子猫の里親募集にお力添えをいただける方、または、このサイトの新着記事の通知をご希望の方はご利用ください。 |
|
|||||||||||
