中級編1

 表を使いこなそう
   表の使いこなしは難しいかな。


『答え』 テーブル(TABLE)タグです。額縁の書式をちょい変えるだけ。

額縁のHTMLは覚えてますか? こうでしたね。

<table border=8><TD>
<TABLE BORDER=1><TD>
<TABLE BORDER=2><td>
<img src="MSM.jpg">
</td></TABLE>
</TD></TABLE>
</td></table>

サンプルの表を見てもらいましょうか。こんなHTML文になります。

<table border=1>
<TR><TD> 名 前 </TD><TD>ミスターOZ</TD></TR>
<TR><TD> 住 所 </TD><TD>東京都中央区銀座1-2-3</TD></TR>
<TR><TD> 電 話 </TD><TD>03-1234-5678</TD></TR>
<TR><TD> メール </TD><TD>info@misteroz.net</TD></TR>
</table>

テーブル宣言した後の<TR>が行の宣言、<TD>が行の中の項目の宣言という感じです。 それがブラウザ上では、↓のように見事な表作成に出来上がり。
 名 前 ミスターOZ
 住 所 東京都中央区銀座1-2-3
 電 話 03-1234-5678
 メール info@misteroz.net

では、作成中の abc.html いや、 index.html でしたね。 その index.html に表を加えてみましょう。


<HTML>
<BODY BGCOLOR="YELLOW">
<center>
<FONT SIZE=5>
<FONT COLOR="BLUE">
私は YourNAME。これは私のホームページです。
<BR><BR>
<table border=8><TD>
<TABLE BORDER=1><TD>
<TABLE BORDER=2><td>
<img src="MSM.jpg"><br>
</td></TABLE>
</TD></TABLE>
</td></table>
</FONT>
</font>
</center>
<BR>
<DIV align="right">
<font color="green" size=4>
コンテンツを増やして行くのでご期待ください。
</font>
</DIV>
<table border=1>
<TR><TD> 名 前 </TD><TD>YourNAME</TD></TR>
<TR><TD> 住 所 </TD><TD>東京都中央区銀座1-2-3</TD></TR>
<TR><TD> 電 話 </TD><TD>03-1234-5678</TD></TR>
<TR><TD> メール </TD>
<TD><A HREF="mailto:info@misteroz.net">YourADDRESS</A>
</TD></TR>
<TR><TD>お気に入り</TD>
<TD><A HREF="https://www.google.com/">グーグル</A>
</TD></TR>
</table>
</BODY>
</HTML>


グーグル検索のリンクとメールリンクも表の中に入れてみました。

出来栄えの確認は●ココをクリック●して下さい。
以上であなたも表作成は中級に成長されたと思います。

☆彡main point
 ・TABLE BORDERの後ろにいろんな指定を入れられます。
 ・<table border=1>の数値が枠線の太さ指定です。
 ・ここまでのタグと同様に<TR>と</TR>はセット。
 ・ここまでのタグと同様に<TD>と</TD>はセット。
 ・<TD bgcolor=green>なんて書式も試してみて下さい。。


質問メール  SCHOOL MENU