『答え』 テーブル(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>
|
グーグル検索のリンクとメールリンクも表の中に入れてみました。
出来栄えの確認は●ココをクリック●して下さい。
以上であなたも表作成は中級に成長されたと思います。