ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

ＴＡＢＬＥで整理整頓　　

おもしろタグ教室【テーブルで整理整頓】

■ 【テーブルで整理整頓VOL.1】テーブルの基本的な使い方！

【はじめに】

【初心者のためのＨＰの飾りつけ教室】とは別に、余談のページを作ってみました。
ここではちょっと変わったタグや、趣向を紹介していきましょう。

みなさん、「ＴＡＢＬＥ」（テーブル）ってご存知ですか。
簡単に言えば、「表」です。

よく見かける、楽天のトップページに、↓このように、センターリングはしてありますが、
縦長に記述されているものをよく見かけます。

【例題です。】 【みなさん！ようこそいらっしゃいました！】

下の画像は、私が

【Ｆ－１】のホームページに行って、

画像をダウンロードして来たものです。

とかの説明を書きまして、この下に、その画像が入れてあります。

これは、私のバナーです。

リンク貼って下さると、うれしいのですが！

どうぞ、ご自由にお持ち帰りください。

こちらは、アニメＧＩＦになっております。

お持ち帰りの時は、画像の上で、右クリックしまして、

プロパティから、ＵＲＬをお持ちください。

という風な具合ですか！

このように、縦長に画像の説明や、バナーを並べて表示しているものがあります。
確かに読みやすいかもしれませんが、ドンドン下に伸びて行ってしまいますね！
下へのスクロールが大変です。(ーー;)　そんな事ないか・・・（*^_^*）

これを、「ＴＡＢＬＥ」タグの中に入れて横に整理しますと、結構まとまって見えると思うのですが。
では、上の表示を、「ＴＡＢＬＥ」タグの中に、入れて見ましょう。

【例題です。】

右の画像は、私が【Ｆ－１】のホームページに行って、画像をダウンロードして来たものです。とかの説明を書きまして、この右に、その画像が入れてあります。
	これは、私のバナーです。リンクを貼って下さると、うれしいのですが！どうぞ、ご自由にお持ち帰りください。アニメＧＩＦになっております。お持ち帰りの時は、画像の上で、右クリックしまして、プロパティから、ＵＲＬをお持ちください。という風な具合ですか！

どうでしょうか！同じ画像と、文を使っておりますが、
こじんまりとまとまったでしょう。（*^_^*）

では！基本的な「テーブル」のタグを書いて見ましょう。

<table><tr><td>ここに文字とか、画像を入れます。</td></tr><tr><td>ここに文字とか、画像を入れます。</td></tr></table>

これを表示して見ますと、↓このようになります。

ここに文字とか、画像を入れます。
ここに文字とか、画像を入れます。

これに枠をつけて見ましょう。<table>の中に、border=1　を入れて見ます。

<table border=1><tr><td>ここに文字とか、画像を入れます。</td></tr><tr><td>ここに文字とか、画像を入れます。</td></tr></table>

これを表示して見ますと、↓このようになります。

ここに文字とか、画像を入れます。
ここに文字とか、画像を入れます。

では、例題のタグを書いて見ましょう。例題は、２行、２列の「テーブル」で出来ております。

そして、枠は入れておりません。

<table border=1><tr><td>ここに文字とか、画像を入れます。</td><td>ここに文字とか、画像を入れます。</td></tr><tr><td>ここに文字とか、画像を入れます。</td><td>ここに文字とか、画像を入れます。</td></tr></table>

これを表示して見ますと、↓このようになります。判りやすいように、枠は入れてあります。

ここに文字とか、画像を入れます。	ここに文字とか、画像を入れます。
ここに文字とか、画像を入れます。	ここに文字とか、画像を入れます。

例題の「ＴＡＢＬＥ」のタグを雛形として、書いて見ましょう。

どのようになっているか、判ると思います。

右の画像は、私が【Ｆ－１】のホームページに行って、画像をダウンロードして来たものです。とかの説明を書きまして、この右に、その画像が入れてあります。

</td> <td>

</td></tr> <tr><td>

</td><td>

これは、私のバナーです。リンクを貼って下さると、うれしいのですが！どうぞ、ご自由にお持ち帰りください。

アニメＧＩＦになっております。お持ち帰りの時は、画像の上で、右クリックしまして、プロパティから、ＵＲＬをお持ちください。という風な具合ですか！

<P>

</td></tr> </table>

上の例題は、このようになって、おります。
手を加えていますのは、<table>のタグの中に width=80% という「テーブル」の幅を指定するタグと、
border=1という、枠を指定するタグを入れております。
<table width=80% border=1>という風になっております。

見てのとおり、「テーブル」のタグ以外は、みなさんが普通に、編集テキストに書きこんでるものと、
ほとんど変わりありません。
<TD> と </TD> のタグの間に、文字や画像を入れただけです。

<P>　　は、１行改行のタグですよね。
<BR>　　は、改行のタグですよね。
<center>～センターリングする文字や画像～</center>　　は、文字や画像をセンターリングします。
<img src=～画像のＵＲＬ～ border=0> 　　は、画像を現す、タグですよね。

「テーブル」タグには、もっと細かく、属性を指定する事が出来ますが、今回は、一番簡単な、「テーブルの使い方」を載せて見ました。

では、次回の例題として、各テーブルの中に、背景色を入れた物を貼り付けて見ましょう。

右の画像は、私が【Ｆ－１】のホームページに行って、画像をダウンロードして来たものです。とかの説明を書きまして、この右に、その画像が入れてあります。
	これは、私のバナーです。リンクを貼って下さると、うれしいのですが！どうぞ、ご自由にお持ち帰りください。アニメＧＩＦになっております。お持ち帰りの時は、画像の上で、右クリックしまして、プロパティから、ＵＲＬをお持ちください。という風な具合ですか！