バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類 | バカネコＰＣ講座 | バカネコのお話

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>タグに追加する。

【おわび】
　冒頭にあった、くだらないネタは削除しました。
　コメントをくださったみなさま、ごめんなさい。
　純粋なバカネコ講座にしました。

ネコでもわかる　バカネコ講座はこちら。　→ 超初心者ＰＣ講座

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

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

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

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