ホームページ作り入門<7>

テーブル[表](1999/02/01)
<table>タグを写真の「額縁」として使ったが、あれは本来の使い方ではない。
本来は57年会のページで「住所録」や「Eメールアドレス」のページのような 「縦横に桝目を切った表」を作るタグなのです。
それでは、写真の下に「Eメールアドレス」の表をつけてみよう。
<!----------------------------------------------> </td></tr> </table> <!------------先回ここまで書き換えた------------> <!-------------今回ここから追加-------------> <hr> <b>会員のEメールアドレス</b> <table border=10 bordercolor=#ff44aa bgcolor=#ffffaa> <tr><th>会員名</th><th>区分</th><th>メールアドレス</th></tr> <tr><td>宮本幸雄</td><td>個人</td><td>qpon@mxc.mesh.ne.jp</td></tr> <!---続けて他のメンバーも書いてください-----> </table> <!-------------今回ここまで追加-------------> </center> </body> </html>
<table></table>は表の始めと終わり
<tr></tr>は一行の始めと終わり
<th> 〜 </th>及び<td>〜 </td>は1マスの始めと終わり
<th>と<td>の違いは
<th>の場合は太字で中央揃えされる、一般に見出しの行に使う。
<td>の場合は標準で左寄せ表示される、一般にデータ行に使う。

それでは保存して実行して見てください。


表示見本
私のホームページ
工事中
私への Eメールはここをクリック して送ってください。
QPONの 掲示板はここをクリックする とつながります。
ホームページ用素材が GOODさん で無料で貰える。

会員のEメールアドレス
会員名区分メールアドレス
宮本幸雄個人qpon@mxc.mesh.ne.jp
xxxx個人xxxx@mb.infoweb.or.jp
oooo個人oooo@mx01.tns.or.jp
−−−−個人----o@sc4.so-net.ne.jp
.
.

変更後のソース

<html> <head> <title> 私のホームページ </title> </head> <body background="003.gif"> <center> <font size=7 color=#00ff00> 私のホームページ<br> </font> <font size=6 color=#ff0000> 工事中<hr> </font> 私への <a href="mailto:qpon@mxc.mesh.ne.jp"><!--自分のアドレスに書き換えのこと--> Eメールはここをクリック </a> して送ってください。 <br> QPONの <a href="http://www2a.biglobe.ne.jp/~qpon/cgi-bin/qpon_bbs.htm"> 掲示板はここをクリックする </a> とつながります。 <br> ホームページ用素材が <a href="https://sozai-good.com/illust/free-background/"> GOODさん </a> で無料で貰える。 <table border=10 bordercolor=#cc0000 bgcolor=#ffffff width="90%"> <tr><td> <a href="5701.jpg"> <img src="57.jpg" width="100%"> </a> </td></tr> </table> <!-------------今回ここから追加-------------> <hr> <b>会員のEメールアドレス</b> <table border=10 bordercolor=#ff44aa bgcolor=#ffffaa> <tr><th>会員名</th><th>区分</th><th>メールアドレス</th></tr> <tr><td>宮本幸雄</td><td>個人</td><td>qpon@mxc.mesh.ne.jp</a></tr> <tr><td>xxxx</td><td>個人</td><td>xxxx@mb.infoweb.or.jp</td></tr> <tr><td>oooo</td><td>個人</td><td>oooo@mx01.tns.or.jp</td></tr> <tr><td>−−−−</td><td>個人</td><td>----o@sc4.so-net.ne.jp</td></tr> </table> <!-------------今回ここまで追加-------------> </center> </body> </html>
ホームページ作り入門<8>へ