バカネコ日記

フリーページ

2004年09月17日
XML
カテゴリ:カテゴリ未分類


さて、今日はテンプレートによく使われる、テーブルのお勉強。
昨日、漁師が龍にレッスンした内容をお話ししよう。

こんなテーブルの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列の表なんて、あまり出番はなさそうだ。

【仔猫の里親募集中】

 ↑この子猫の里親を募集しています。残り3匹。


では、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講座

笑って楽しみたい方はこちら   → 爆笑ガイド

パソコン買い替えの前にチェック → 費用の削り方



画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
子猫の里親募集にお力添えをいただける方、または、このサイトの新着記事の通知をご希望の方はご利用ください。



 








最終更新日  2004年09月18日 16時58分45秒
コメント(17) | コメントを書く

PR

バックナンバー

2019年08月
2019年07月
2019年06月
2019年05月
2019年04月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.