GT-ONE 楽天タグ講座 パイプ奮闘記

TABLEで整理整頓  

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

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


【はじめに】

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



みなさん、「TABLE」(テーブル)ってご存知ですか。
簡単に言えば、「表」です。

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





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



下の画像は、私が

【F-1】のホームページに行って、

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

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









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

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

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




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

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

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

という風な具合ですか!








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

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



【例題です。】


右の画像は、私が【F-1】
のホームページに行って、
画像をダウンロードして来たものです。

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









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



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





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

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



    <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>

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

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


    では、例題のタグを書いて見ましょう。例題は、2行、2列の「テーブル」で出来ております。
    そして、枠は入れておりません。

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

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

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




例題の「TABLE」のタグを雛形として、書いて見ましょう。

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



    <table width=80% border=1><tr><td>右の画像は、私が【F-1】のホームページに行って、画像をダウンロードして来たものです。 とかの説明を書きまして、この右に、その画像が入れてあります。</td> <td><IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/19.jpg" BORDER="0"> </td></tr> <tr><td><CENTER><BR><BR><BR> <IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/5.png" BORDER="0"><P><BR><BR> <IMG SRC="http://plaza.rakuten.co.jp/img/user/65/14/1286514/50.gif" BORDER="0"><P><BR></CENTER> </td><td><BR> <BR><BR> これは、私のバナーです。リンクを貼って下さると、うれしいのですが! どうぞ、ご自由にお持ち帰りください。<P> <BR><BR> アニメGIFになっております。 お持ち帰りの時は、画像の上で、右クリックしまして、プロパティから、URLをお持ちください。という風な具合ですか!<P> </td></tr> </table>



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

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

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

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


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


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









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



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




どうでしょう。また感じが変わったでしょう。

これは、<td>の中に、各テーブルの背景色を指定したものです。

<td>の中に、bgcolor=色の指定、をこのように入れますと、<td bgcolor=yellow> のように。
各「テーブル」の背景色が、指定できますよ。





★ではみなさんがんばってください。★
ご質問、ご感想は掲示板か私書箱にどうぞ!
よく御存じの方は読まないで下さいね。(*^_^*)




おもしろタグ教室【MENU】 にもどる。







© Rakuten Group, Inc.