初めてのテーブル




★タグの勉強から始めましょう。
<table>・・・・これから表(テーブル)を作る というタグ
枠をつけるために枠の表示のためのタグ<table frame="box">を使います。
<tr>・・・・ 1段目 を表すタグ
<td>・・・・ 1つの箱(マス)を表すタグ

<table><tr><td>のセットで「テーブル作り開始」となる
</td>で閉じるとそのマスが終わり、</tr>で閉じると、その段が終わる
</table>で閉じるとテーブルが終わる

★1段1マスのテーブル作り
<table frame="box">
<tr><td>文字を入れよう!1段1マス</td></tr></table>
文字を入れよう!1段1マス



★1段2マスのテーブル作り
<table frame="box">
<tr><td>左側の文字を入れよう</td><td><右側の文字を入れよう<tr></tr></table>
左側の文字を入れよう
右側の文字を入れよう


★2段1マスのテーブル作り
<table frame="box">
<tr><td>1段目の文字を入れよう!</td></tr>
<tr><td>2段目の文字を入れよう!</td></tr></table>
1段目の文字を入れよう!
2段目の文字を入れよう!



★2段2マスのテーブル作り
<table frame="box">
<tr><td>左上</td><td>右上</td></tr>
<tr><td>左下</td><td>右下</td></tr>
</table>
左上 右上
左下 右下


★段を増やすには、
<tr><td>左下にふやす</td><td>右下にふやす</td></tr>
を繰り返しふやしていき、最後に</table>で閉じる
<table frame="box">
<tr><td>左上</td><td>右上</td></tr>
<tr><td>左下</td><td>右下</td></tr>
<tr><td>左下にふやす</td><td>右下にふやす</td></tr>
</table>
左上
右上
左下
右下

左下にふやす
右下にふやす



★文字が2行・3行になる時は、そのマスの中で改行(<br>)を入れる
<table frame="box">
<tr><td>堂本光一</td><td>1979年1月1日生まれ <br>
最強の王子様</td></tr>
<tr><td>今井翼</td><td>1981年10月17日生まれ <br>
ダンスセンス抜群</td>
<tr><td>山下智久</td><td>1985年4月9日生まれ <br>
デビューを目指せ</td></tr>
<tr><td>中田浩二</td><td>1979年年7月9日生まれ <br>
頑張れ日本代表</td></tr>
</table>
堂本光一
1979年1月1日生まれ
最強の王子様
今井翼
1981年10月17日生まれ
ダンスセンス抜群

山下智久
1985年4月9日生まれ
デビューを目指せ
中田浩二
1979年年7月9日生まれ
頑張れ日本代表



★作ったテーブルをアレンジ(1)
<table frame="box"rules="cols">のタグを使いましょう。
堂本光一
1979年1月1日生まれ
最強の王子様
今井翼
1981年10月17日生まれ
ダンスセンス抜群

山下智久
1985年4月9日生まれ
デビューを目指せ
中田浩二
1979年年7月9日生まれ
頑張れ日本代表


★作ったテーブルをアレンジ(2)
<table frame="box"rules="rows">のタグを使いましょう。

堂本光一
1979年1月1日生まれ
最強の王子様
今井翼
1981年10月17日生まれ
ダンスセンス抜群

山下智久
1985年4月9日生まれ
デビューを目指せ
中田浩二
1979年年7月9日生まれ
頑張れ日本代表



© Rakuten Group, Inc.

Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: