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