CGI：HTML表示結果のカスタマイズとタグの隙間

お世話になります。
CGIはフリー配布されているものをわずかに触る程度の初心者で、足りないことを申し上げてしまうと思いますが教えていただけますと嬉しいです。

今、「リンクラリー」というフリー配布のCGIをさわっています。
これをベースにwebスタンプラリー（リンクバナーをスタンプ画像にしたり）として何とか雰囲気だけは近づけたのですが、どうしても表示を思うようにできなかったり、「どうしてこここにこの隙間ができるんだろう…」と自分では解明できない状況が生じました。
CGI配布元様：http://exdreams.net/room/contents/e_lrarry.html

(1)進捗を確認する「user_rarrylist.html」の一覧表を、５列×３行（15マス）として表示したいのですが、<!－－START RARRY LIST－－><!－－END RARRY LIST－－>で繰り返し処理（スタンプゲット）を挟むと、次の処理との間に隙間ができてしまいます。
TABLEで背景画像（スタンプシート）とWIDTHを指定していますが、ゲットしたスタンプ（IMG）がずれていきます（背景とうまく重ならない）。
●TDタグ使用→TDタグで15個生成されるため、横に15マスの長い表ができてしまう。

(2)指定したID名にゲットスタンプを放り込む、などという方法は思いついても、実現可能かどうかさえ分かりませんでした。

(2)DIVタグのID属性（名前）を利用して、ボックスの表示・非表示をコントロールすることは可能でしたが、やはり隙間の問題と、思った順番（スタンプA→ボックス１に表示）することができませんでした。

(1)(2)(3)(4)(5)
(6)(7)(8)(9)(11)
(12)(13)(14)(15)(16)
このように「5×3」で番号順に（ゲット順に影響受けず）表示ができればと思っております。
もし可能であれば、教えていただけますと嬉しいです。
よろしくお願いいたします。

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2014/09/25 09:22

普通にリストとしてマークアップして、スタイルシートでフロートさせれば良いです。

文書の整形のためにtableを使用するのは禁忌でもあるし・・
『単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
『ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

　それを、ウィンドウ幅に合わせて伸縮させれば良いです。mediaquery使ってウィンドウ幅で列数を変更することも可能になります。
[例]
<ol id="PartyList">
　<li>内容</li>
　<li>内容</li>
・・・
ol#PartyList,ol#PartyList li{list-style:none;margin:0;padding:position:relative;}
ol#PartyList li{width:19%;float:left;}

この回答へのお礼

早速のご回答をありがとうございました。
実装してみましたところ、イメージ通りの一覧表が完成いたしました！
本当に感動しました。CGIのいじり方ばかりに気をとられ、タグでどこまで表現できるのかに盲目しておりました。
TABLE使用の記事につきましても大変参考になりました。今後のサイト作りの際に気を付けたいと思います。
この度は本当にありがとうございました。またお目にかかる機会がございましたらぜひご教授よろしくお願いいたします。

お礼日時：2014/09/25 13:57