中級編6

 表をカラフルに
   テーブル書式の応用を覚えよう。


表を使いこなすのサンプルはこんなHTML文でしたね。

<table border=1>
<TR><TD>名 前</TD><TD>ミスターOZ</TD>
<TR><TD>住 所</TD><TD>東京都中央区銀座1-2-3</TD>
<TR><TD>電 話</TD><TD>03-1234-5678</TD>
</table>
それをブラウザで見ると下記の通りでした。
名 前ミスターOZ
住 所東京都中央区銀座1-2-3
電 話03-1234-5678

さてさて、この表では欄の中が背景色になってしまってますね。ここに背景色を入れてみようって訳です。 こんなカラフルな表組みは如何ですか。
名 前ミスターOZ
住 所東京都中央区銀座1-2-3
電 話03-1234-5678
このカラフル表組みのHTML文は下記の通りです。

<table border=1>
<TR><TD>名 前</TD><TD bgcolor="#ffbbff">ミスターOZ</TD>
<TR><TD>住 所</TD><TD bgcolor="#ccffff">東京都中央区銀座1-2-3</TD>
<TR><TD>電 話</TD><TD bgcolor="#ffffcc">03-1234-5678</TD>
</table>

今までは色指定を blue とか yellow とか色ネームで記載してきましたが、 微妙な色はコード指定の方が適していますね。
では、ここまで作成中のHTML文をカラフルに修正しましょうか。

<HTML>
<BODY background="bg01.gif">
<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>
<center><table border=1>
<TR><TD> 名 前 </TD><TD bgcolor="#ffccff">Your NAME</TD></TR>
<TR><TD> 住 所 </TD><TD bgcolor="#ccffff">東京都中央区銀座1-2-3</TD></TR>
<TR><TD> 電 話 </TD><TD bgcolor="#ffffcc">03-1234-5678</TD></TR>
<TR><TD> メール </TD><TD bgcolor="#ccffcc"><A HREF="mailto:info@misteroz.net">
Your ADDRESS</TD></TR><TR><TD>お気に入り</TD><TD bgcolor=ccdd11>
<A HREF="https://misteroz.net/ozland/">遊園地</A>
</TD></TR>
</table>
</center>
</BODY>
</HTML>

出来上がりは ●ココをクリック● して確認下さい。
エエ感じやなぁ〜と納得されたら、この項は修了で〜す。

質問メール  HomePageSchool