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.
    Mobilize your Site
    スマートフォン版を閲覧 | PC版を閲覧
    Share by: