テーブル１

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

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

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

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

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

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

これを直すと、

　…となります。

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

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

…と、こんな感じ。

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

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

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

これを直すと、

↓

★ここが１マス★

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

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

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

★ここが１マス★

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

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

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

１マス目

２マス目

…となります。

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

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

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

★１行目★
★２行目★

…こうなります。

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

↓

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

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

ジャンル別一覧

人気のクチコミテーマ

スマートフォン版を閲覧 | PC版を閲覧