テーブル１

***　テーブルタグ　NO，1　***

次はテーブルを作ってみましょう♪
『テーブル』って何ぞや？　…とお思いでしょう★
簡単に言うと、『枠（表）』を作る事です。

例えば、『複数の画像を並べる』『文字の背景だけに色や画像を入れる』等、
このタグを使えば、簡単に出来ます。
テーブルは用途が多様で、とても便利なタグです。
NO,1 はテーブルの基本となりますので、丁寧にご説明しますね♪
とりあえず　やってみまよう！　(↓これもテーブル)

*まずは、『テーブル宣言』
　初めに入れるのは、<table>です。（ここから枠を作ります。って事。）

*その次に、<tr>
　これは、『ここから１行目を作ります』って事。

*そして<td>
　これが、『ここからが１つのマスです』って事。

これを直すと、

<table><tr><td>

　…となります。

そして、この後に１マスに入れる文字(例:★ここが１マス★)等を書きます。

<table><tr><td>★ここが１マス★

…と、こんな感じ。


最後に、タグの締めくくりをします。

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

…と言う風に、文字を中心として逆に閉じていきます。
『/』(スラッシュ)は「ここまで」という意味です。

これを直すと、

<table><tr><td>★ここが１マス★</td></tr></table>
↓
★ここが１マス★

…となりますが、これではどこがテーブル枠になっているのか分かりませんね(^^;
通常は「見えない枠」と思っていて頂ければ結構です。
使い道としては、画像等を均等に並べる時等に使用すると綺麗に見えます。



それでは、tableの後に、『frame="box"』と入れて見ましょう♪
これは、枠の表示方法です。

<table frame="box">

どんな風になったかというと…

★ここが１マス★

…となります。枠が表示されましたネ♪


次に、複数のマス目をを作って行きましょう。
<td>～</td>が１マスになるので、２マス目・３マス目…と表示するには、

<td>１マス目</td><td>２マス目</td>

…のように、<td>～</td>を増やせば良いのです。
これを見てみると…

１マス目２マス目

…となります。




次は『行 <tr>』を増やしてみましょう。

先程のfont color="red"><td>と同じ様に、１行を作るのも同じ要領で
<tr>～</tr>　で締めくくりマス。

<tr><td>★１行目★</td></tr>
<tr><td>★２行目★</td></tr>

…と、こんな感じ｡｡｡
これを見てみると、

★１行目★
★２行目★

…こうなります。

以上　全部をおさらいしてみると・・・

<table frame="box">
<tr><td>★１行目の１マス目★</td><td>★１行目の２マス目★</td> </tr>
<tr><td>★２行目の１マス目★</td><td>★２行目の２マス目★</td></tr>
</table>

↓

★１行目の１マス目★★１行目の２マス目★
★２行目の１マス目★★２行目の２マス目★

…と、２行２マスづつの枠が出来たはずです。
出来ましたか？？(^^)
© Rakuten Group, Inc.