013144 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

ひなこの楽天web制作研究所

ひなこの楽天web制作研究所

【毎日開催】
15記事にいいね!で1ポイント
10秒滞在
いいね! --/--
おめでとうございます!
ミッションを達成しました。
※「ポイントを獲得する」ボタンを押すと広告が表示されます。
x
June 23, 2004
XML
カテゴリ:カテゴリ未分類
や! 久しぶりです。

掲示板その他にあまりレスできなくてすみませんでした。

で、テーブルについてです。さっそくです。

htmlでテーブル(表のこと)てのは、すごい、もうよく使います。楽天の日記の中では使えないっぽいですが、トップページとか、あとサイドのページでは使えると思います。

これは、表を作るだけではなくて、画面をレイアウトしたり配置するのに使えます。とてもおくが深いです。ええ。なので、ゆっくりちょっとずつ解説しますね。



まず、テーブルってことで

<table>

</table>

と書きます。
<table>こちらが開始タグ。
</table>こちらが終了タグです。

当然ですが、すべて半角英数字で。スペルミスのないように注意してくださいね!!

で、テーブルの中に行と列があります。

とりあえず、3行2列のテーブルにしてみましょう。
行は
<tr> こちらが開始タグ。
</tr>こちらが終了タグ。

これをさっきのテーブルの内側に書きます。

<table>
<tr>
</tr>

</table>

で、列はですね。
<td> こちらが開始タグ。
</td>こちらが終了タグ。

これを、行の内側に書きます。

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

</tr>

</table>

これで、一行、一列です。

で、二列にするには。
<td>
</td>

これをもう一個後ろに追加します。

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

</tr>

</table>

こうです。三列以上にしたい場合も同じように後ろに追加してください。

復習です>行(tr)の中に、列(td)を書きます。

で、もともと3行2列のテーブルにするといいました。この行の部分を全部コピーしてもう一個後ろに追加します。つまり。

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

</tr>

ここ、をコピーして。この後ろにペースト。

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

</tr>

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

</tr>

</table>

こうです。3行にするので、もういっちょコピー!

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

</tr>

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

</tr>

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

</tr>

</table>

これで3行2列のテーブルができました。

これで表が表示されます…。がひとつ注意。

テーブルの中に文字を書き込みたいときには!
<td>
このあいだに書きます。
</td>

で、じつは tdの中身に何も書いていないと、表がきちんと表示されません。


<table>
<tr>
<td>なまえ
</td>
<td>ひなこ
</td>

</tr>

<tr>
<td>せいべつ
</td>
<td>おんなのこ
</td>

</tr>

<tr>
<td>しゅみ
</td>
<td>どくしょ
</td>

</tr>

</table>

のように、中身を書いてみます。

今日はここまで~~。

どう?やってみて~。

こんな風になったかな?
http://plaza.rakuten.co.jp/hina2/3001

このままだともちろん話にならないので、あしたからちょっとずついじっていきます。





お気に入りの記事を「いいね!」で応援しよう

Last updated  June 23, 2004 09:22:41 PM
コメント(0) | コメントを書く


PR

Category

Profile

ひなちゃん2号

ひなちゃん2号

Freepage List

Archives

November , 2024
October , 2024
September , 2024
August , 2024
July , 2024

Comments

海のくまさん@ チン型取られちゃったw <small> <a href="http://onaona.mogmog…
ボーボー侍@ 脇コキって言うねんな(爆笑) 前に言うてた奥さんな、オレのズボン脱が…
リナ@ 今日は苺ぱんちゅ <small> <a href="http://kuri.backblac…
地蔵@ 驚きのショックプライスw コウちゃんがこないだ教えてくれたやつ、…
しおん@ ヤホヤホぉ★ こっちゎ今2人なんだけどぉ アッチの話…

Calendar

Recent Posts

Headline News


© Rakuten Group, Inc.
X