………………………………………………………………………………………
ひょうって？
もじや かずを まとめて、
みやすいように ならべたものです。
………………………………………………………………………………………
ひょうを つくってみよう
こんなふうに、もじを ひとかたまりづつ かくことが できます。（「みてみよう」ボタンをおしてね）
１．「さいしょのさいしょ」でつくった「file1.html」に、
したの ふともじでかいてある きごう（タグ）をかいてみてね。
（はいいろのところは「file1.html」でつくったものなので、かかなくていいです） |
<HTML>
<HEAD>
<TITLE> はじめてのホームページ </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>ひだりうえです。</TD>
<TD>みぎうえです。</TD>
</TR>
<TR>
<TD>ひだりしただよ。</TD>
<TD>みぎしただよ。</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
●・ せつめい ・●
- <TABLE></TABLE>
ひょうを つくりなさい、というめいれいです。
- <TR></TR>
ひょうの「ぎょう」をつくるめいれいです。
<TR>と</TR>のあいだの もじやきごうが、
ひとつの よこのぎょうになります。
- <TD></TD>
ひとつひとつの、ひょうの なかみをあらわすめいれいです。
<TD>と</TD>のあいだの もじやきごうが、
ひょうの ひとつひとつのなかみです（データといいます）。
- ひょうの つくりは、<TD></TD>のデータが いちぎょうぶん ならんで、
それを ぎょうの <TR></TR>タグでかこみ、
なんぎょうもの <TR></TR>タグを、ひょうの<TABLE></TABLE>タグが かこんでいます。
<TABLE>
<TR><TD></TD> <TD></TD> … <TD></TD> <TD></TD></TR>
<TR><TD></TD> <TD></TD> … <TD></TD> <TD></TD></TR>
…
<TR><TD></TD> <TD></TD> … <TD></TD> <TD></TD></TR>
<TR><TD></TD> <TD></TD> … <TD></TD> <TD></TD></TR>
</TABLE>
|
|
………………………………………………………………………………………
ひょうって、どんなものだか わかったかな…？
………………………………………………………………………………………
ひょうの わくせんを つけてみよう
………………………………………………………………………………………
もっと ひょうらしくするために、ひょうの わくせんを つけてみよう。
………………………………………………………………………………………
わくせんのめいれいは、「６．えを はりつける」で でてきた、BORDERをつかいます。
うえの ファイルの、<TABLE>の <TABLEと>のあいだに、BORDER=1と かいてみて。(<TABLE BORDER=1>)
これを ブラウザでみてみると…？（「みてみよう」ボタンをおしてね）
わくせんが、つきました。
ひょうに みだしをつけてみよう
こんなふうに、ひょうに みだしを つけてみよう。（「みてみよう」ボタンをおしてね）
さっきかいたつづきに、したのきごう（タグ）をかいてみてね。
（はいいろのところは上でつくったものなので、かかなくていいです） |
<HTML>
<HEAD>
<TITLE> はじめてのホームページ </TITLE>
</HEAD>
<BODY>
<TR>
<TD></TD>
<TH>ひだりの みだしです。</TH>
<TH>みぎの みだしです。</TH>
</TR>
<TR>
<TH>うえの みだしです。</TH>
<TD>ひだりうえです。</TD>
<TD>みぎうえです。</TD>
</TR>
<TR>
<TH>したの みだしです。</TH>
<TD>ひだりしただよ。</TD>
<TD>みぎしただよ。</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
●・ せつめい ・●
- <TH></TH>
ひょうの みだしをつける めいれいです。
このタグをつかうと、もじがふとく、まんなかよせに なります。
|
みだしを、よこ１れつにしたいときは、<THと>のあいだに、
COLSPAN="〜"（〜は、いちぎょうの なかのデータのかず）と かきます。
(いまは、いちぎょうの データのかずが ふたつだから、<TH COLSPAN=2>というふうにかきます)
みだしを、たていちれつに したいときは、<THと>のあいだに、
ROWSPAN="〜"（〜は、いちれつの なかのデータのかず）と かきます。
(いまは、いちれつの データのかずが ふたつだから、<TH ROWSPAN=2>というふうにかきます)
もっと ひょうを みやすくしてみよう
………………………………………………………………………………………
ひょうの大きさを かえてみよう。
………………………………………………………………………………………
ひょうを すきな おおきさにするには、「６．えを はりつける」で でてきた、WIDTH=〜 や HEIGHT=〜 をつかいます。
たとえば、さっきのファイルの、<TABLE>の <TABLEと>のあいだに、
WIDTH=500 HEIGHT=200をいれてみると…(<TABLE BORDER=1 WIDTH=500 HEIGHT=200>)
ひょうが おおきくなりました。
………………………………………………………………………………………
ひょうに いろをつけてみよう。
………………………………………………………………………………………
こんどは、「１．さいしょのさいしょ」で でてきた、BGCOLOR="〜"というめいれいをつかいます。
さっきとおなじように、うえのファイルの、<TABLE>の <TABLEと>のあいだに、
BGCOLOR="pink"（ピンクにしなさい、というめいれい）と かいてみて。(<TABLE BORDER=1 BGCOLOR="pink">)
（いろは、「おまけ・いろのいろいろ」をみてね）
ブラウザでみてみると…？（「みてみよう」ボタンをおしてね）
ひょうが、 ピンクいろに なりました。
………………………………………………………………………………………
ひょうに えを しきつめることも できます。
………………………………………………………………………………………
これは、「１．さいしょのさいしょ」で でてきた、BACKGROUND="えの ファイルのなまえ"というめいれいをつかいます。
さっきとおなじように、うえのファイルの、<TABLE>の <TABLEと>のあいだに、
BACKGROUND="えの ファイルのなまえ"と かきます。
ここでは、ピカチュウのえを はりつけてみますね。
(<TABLE BORDER=1 BACKGROUND="pika1.gif">)
ブラウザでみてみると…？（「みてみよう」ボタンをおしてね）
ひょうのなかは もうひとつのせかい
………………………………………………………………………………………
<TD></TD>タグのなかは、
ひとつひとつちがういろをつけたり、えを しきつめたりできます。
たとえば、こんなことも できちゃいます。
………………………………………………………………………………………
<HTML>
<HEAD>
<TITLE> はじめてのホームページ </TITLE>
</HEAD>
<BODY>
<TR ROWSPAN=2>
<TH BACKGROUND="pika1.gif">みだしです。</TH>
</TR>
<TR>
<TD BGCOLOR="pink">ひだりうえです。</TD>
<TD>みぎうえです。</TD>
</TR>
<TR>
<TD>ひだりしただよ。</TD>
<TD BGCOLOR="pink">みぎしただよ。</TD>
</TR>
</TABLE>
</BODY>
</HTML>
|
ブラウザでみてみると…？（「みてみよう」ボタンをおしてね）
………………………………………………………………………………………
ひょうをじょうずにつかうと、きれいなホームページができそうだね。
………………………………………………………………………………………
もうすこし おにいさん、おねえさんのためのまとめです。
タグのいろいろ(8)
テーブルタグ
| <TABLE></TABLE> | →表の作成 |
| <TR></TR> | →行をあらわす |
| <TD></TD> | →セルの内容 |
| <TH></TH> | →見出しセル（太文字+中央寄せ） |
| WIDTH=〜（〜はピクセルまたは画面に対する%） | →表の横幅 |
| HEIGHT=〜（〜はピクセルまたは画面に対する%） | →表の縦幅 |
| BORDER=〜（〜はピクセル） | →表の枠線の太さ指定 |
| CELLSPACING=〜（〜はピクセル） | →表の外枠以外の線の太さ指定 |
| CELLPADDING=〜（〜はピクセル） | →セル内データのマージン指定 |
| BGCOLOR="〜"（〜は色指定） | →表の背景色 |
| BACKGROUND="〜"（〜は画像ファイル名） | →表の背景画像 |
| COLSPAN=〜（〜は列の数） | →列のセル結合 |
| ROWSPAN=〜（〜は行の数） | →行のセル結合 |
| ALIGN="center" | →セル内データの位置指定
（真ん中寄せ） |
| ALIGN="right" | →セル内データの位置指定
（右寄せ） |
| VALIGN="top" | →セル内データの位置指定
（上寄せ） |
| VALIGN="bottom" | →セル内データの位置指定
（下寄せ） |
| NOWRAP | →セル内データの折り返し禁止 |
<CAPTION></CAPTION>
| →表の注釈の指定 |
まえへ
つぎへ