一覧表の作り方

htmlの作成がわかると面白くなります。
”＜”と”＞”は本来は半角ですが、ここで書くと実行されてしまうので全角で書きます。
一般的に＜TABLE＞＜/TABLE＞のように＜タグ名＞で始まり＜/タグ名＞　で終わります。
　＜TABLE＞＜TR＞＜TH＞ミルトモ＜/TH＞＜/TR＞＜/TABLE＞のように使います。
　＜TABLE＞＜TR＞＜TH＞ミルトモ＜/TR＞＜/TH＞＜/TABLE＞のようにならないように注意しましょう。
。
訪問者一覧（ミルトモ一覧より楽です）＜BR＞アバターも自分の気に入ったもが選べます。

＜TABLE＞ ←　テーブルの開始（Ｅｘｃｅｌの表みたいなのを作りますのようなもの）
＜TBODY＞　←　本文の開始（当然ヘッダもあります。ここでは省略）
＜TR＞＜TD colSpan=2 align=left＞ミルトモ＜/TD＞＜/TR＞
＜TR＞ ←　行の始まり
  ＜TR＞　←行の始まり
  ＜TD＞　←データの始まり（＜/TD＞までがひとつのセルに入ります）
   ＜TABLE border=1＞　←　テーブルの開始（一つのセルをさらに細かくします）
    ＜TBODY＞
     ＜TR＞＜TD align=middle＞＜A href="address"＞＜IMG border=0 src="image"＞＜/A＞＜/TD＞＜/TR＞
     ＜TR＞＜TD align=middle＞＜FONT size=1＞2010/07/13＜/FONT＞＜/TD＞＜/TR＞
     ＜TR＞＜TD align=middle＞＜A href="address"＞＜FONT size=1＞１行目１列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞
    ＜/TBODY＞
   ＜/TABLE＞
  ＜/TD＞
  ＜TD＞
   ＜TABLE border=1＞
    ＜TBODY＞
     ＜TR＞＜TD align=middle＞＜A href="address"＞＜IMG border=0 src="image"＞＜/A＞＜/TD＞＜/TR＞
     ＜TR＞＜TD align=middle＞＜FONT size=1＞2010/07/19＜/FONT＞＜/TD＞＜/TR＞
     ＜TR＞＜TD align=middle＞＜A href="address"＞＜FONT size=1＞１行目２列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞
    ＜/TBODY＞
   ＜/TABLE＞
  ＜/TD＞
  ＜/TR＞
＜/TR＞
＜TR＞
  ＜TR＞
  ＜TD＞
   ＜TABLE border=1＞
    ＜TBODY＞
     ＜TR＞＜TD align=middle＞＜A href="address"＞＜IMG border=0 src="image"＞＜/A＞＜/TD＞＜/TR＞
     ＜TR＞＜TD align=middle＞＜FONT size=1＞2010/07/13＜/FONT＞＜/TD＞＜/TR＞
     ＜TR＞＜TD align=middle＞＜A href="address"＞＜FONT size=1＞２行目１列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞
    ＜/TBODY＞
   ＜/TABLE＞
  ＜/TD＞
  ＜TD＞
   ＜TABLE border=1＞
    ＜TBODY＞
     ＜TR＞＜TD align=middle＞＜A href="address"＞＜IMG border=0 src="image"＞＜/A＞＜/TD＞＜/TR＞
     ＜TR＞＜TD align=middle＞＜FONT size=1＞2010/07/19＜/FONT＞＜/TD＞＜/TR＞
     ＜TR＞＜TD align=middle＞＜A href="address"＞＜FONT size=1＞２行目２列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞
    ＜/TBODY＞
   ＜/TABLE＞
  ＜/TD＞
  ＜/TR＞
＜/TR＞
＜/TBODY＞
＜/TABLE＞

address	イメージまたは、名前のショートカットをコピー
image	画像のＵＲＬ　ＩＥの場合は、画像のプロパティを開いてアドレスをコピー
＜A href="address"＞	クリックしたときにジャンプする場所
＜IMG border=0 src="image"＞	画像の表示
＜!--コメント--＞	コメント
＜BR＞	改行を表します。一言メッセージでも使えます。
＜TABLE＞＜/TABLE＞	テーブルの始まりと終わり
＜TBODY＞＜/TBODY＞TD>	本文の始まりと終わり
＜TR＞＜/TR＞	行の始まりと終わり
＜TD＞＜/TD＞	データの始まりと終わり
＜FONT＞＜/FONT＞	書式の始まりと終わり
＜A＞＜/A＞	リンクの始まりと終わり（名前とか日記一覧でアンダーラインが付いているところ）
属性
colSpan	横方向の複数のセルをひとつにします。colspan=2 ２つのセルを１つにする
align	場所の指定　align=left:左　align=middle:中　align=right:右
border	枠の表示／非表示 border=0:非表示 border=1:非表示
size	文字の大きさ　size=1 (多分１番小さい)
color	文字の色
bgcolor	背景色
bordercolor	線の色
色	color=blue blue　red　yellow　aqua　fuchsia　lime　olive　green　teal　navy　purple等

sample　ここから→
訪問者一覧（ミルトモ一覧より楽です）＜BR＞アバターも自分の気に入ったもが選べます。
＜TABLE＞
＜TBODY＞
＜TR＞＜!--ミルトモ--＞
＜TH colSpan=7 align=left＞ミルトモ＜/TH＞
＜/TR＞
＜TR＞
＜TR＞
＜TD＞＜!-- ここから--＞
＜TABLE border=1 borderColor=#ff0000＞
＜TBODY＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜IMG border=0 src="http://www.milu.jp/popup_inc/utility/photo?dir=/UploadFile/avater/2010/07/07&id=201007071650.jpg&w=70&h=0&hash=4f9c8f08384936fbadb51fc37d6ac5f1"＞＜/A＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜FONT size=1＞2010/07/13＜/FONT＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜FONT size=1＞１行目１列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞＜/TBODY＞＜/TABLE＞＜/TD＞＜!-- ここまで --＞
＜TD＞＜!-- ここから--＞
＜TABLE border=1 borderColor=#ff0000＞
＜TBODY＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜IMG border=0 src="http://www.milu.jp/popup_inc/utility/photo?dir=/UploadFile/avater/2010/07/07&id=201007071650.jpg&w=70&h=0&hash=4f9c8f08384936fbadb51fc37d6ac5f1"＞＜/A＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜FONT size=1＞2010/07/13＜/FONT＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜FONT size=1＞１行目２列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞＜/TBODY＞＜/TABLE＞＜/TD＞＜!-- ここまで --＞＜/TR＞
＜TR＞
＜TD＞＜!-- ここから--＞
＜TABLE border=1 borderColor=#ff0000＞
＜TBODY＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜IMG border=0 src="http://www.milu.jp/popup_inc/utility/photo?dir=/UploadFile/avater/2010/07/07&id=201007071650.jpg&w=70&h=0&hash=4f9c8f08384936fbadb51fc37d6ac5f1"＞＜/A＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜FONT size=1＞2010/07/18＜/FONT＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜FONT size=1＞２行目１列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞＜/TBODY＞＜/TABLE＞＜/TD＞＜!-- ここまで --＞
＜TD＞＜!-- ここから--＞
＜TABLE border=1 borderColor=#ff0000＞
＜TBODY＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜IMG border=0 src="http://www.milu.jp/popup_inc/utility/photo?dir=/UploadFile/avater/2010/07/07&id=201007071650.jpg&w=70&h=0&hash=4f9c8f08384936fbadb51fc37d6ac5f1"＞＜/A＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜FONT size=1＞2010/07/04＜/FONT＞＜/TD＞＜/TR＞
＜TR＞
＜TD bgColor=#ddffee align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜FONT size=1＞２行目２列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞＜/TBODY＞＜/TABLE＞＜/TD＞＜!-- ここまで --＞＜/TR＞＜/TBODY＞＜/TABLE＞
←　ここまでsample　

１．sampleここからの下の行からここまでsampleまでをメモ帳にコピーします。

２．全角の”＜”と”＞”を半角に置換します。

３．名前をつけて保存をします。拡張子に気をつけてください。

４．ファイルを開いて下のように表示されればＯＫです。

ミルトモ一覧（試作）
アバターも自分の気に入ったもが選べます。

ミルトモ

2010/07/13

2010/07/13

2010/07/18

2010/07/04

５．注意事項

　　　１行　８人くらいで、１０行は編集できると思います。

　　　コメントを外せば、１２行くらい出来ると思います。

　　　画像の大きさはピクセル表示です。７０ピクセル位が良いでしょう。

　　　大きさを変えるには　.jpg&w=70&h=0&ha　の”７０”を変更します。

　　１人分単位で、まとまっているので配置換えが楽です。

【１人分】

＜TD＞＜!-- ここから--＞
＜TABLE border=1 borderColor=#ff0000＞
＜TBODY＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜IMG border=0 src="http://www.milu.jp/popup_inc/utility/photo?dir=/UploadFile/avater/2010/07/07&id=201007071650.jpg&w=70&h=0&hash=4f9c8f08384936fbadb51fc37d6ac5f1"＞＜/A＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜FONT size=1＞2010/07/13＜/FONT＞＜/TD＞＜/TR＞
＜TR＞
＜TD align=middle＞＜A href="http://www.milu.jp/popup_inc/showfriend/?uid=qqidn6ib"＞＜FONT size=1＞１行目２列目＜/FONT＞＜/A＞＜/TD＞＜/TR＞＜/TBODY＞＜/TABLE＞＜/TD＞＜!-- ここまで --＞

参考　HTMLの基本、ホームページの作成など

出来ない人は、メールで相談に応じます。