●table 更新を簡単にしたい

質問

更新が多いHPの更新を少し簡単にしたいと思っています。
そのHPでは、商品画像がいくつも並んでいます。

<table>
<tr><td>(1)</td><td>(2)</td><td>(3)</td></tr>
<tr><td>(4)</td><td>(5)</td><td></td>なし</tr>
</table>

たとえば上記のようになっていて、
A：(3)が売り切れたときに
(1)　(2)　(4)
(5)　　　　　　　　のようにしたい。

または、新しい”０”という商品が出たときに、

B：
０　(1)　(2)
(3)　(4)　(5)

というようにしたい。

というA・Bふたつの作業を多く行っています。

普段は、TDをコピーして、入れ替えをしています。
ただ、実際はTRがもっと多かったり、それぞれのTDの中に
さらにTABLEが入っていて、ミスをしてしまったりと
時間をかけてしまっています。
これを、(3)を削除しただけで、ひとつ上の段に(4)がいったり、
０を追加しただけで、それぞれひとつ次の段にずれたり
というしくみに変えることは可能でしょうか？
何かやり方があるような気がして調べていますが、
全くヒットしません。。。

どなたかご存知でしたら是非ご教授ください。
よろしくお願いいたします。

回答No.6

hetare560 · ベストアンサー

ANo.2です。

＞高さというのは、画像の高さ、とかということでしょうか。。？

画像の高さに限らず<li>の高さをそろえると言う事です。

例えば

<ul>
<li>サンプル1</li> /* height 200px */
<li>サンプル2</li> /* height 150px */
<li>サンプル3</li> /* height 150px */
<li>サンプル4</li> /* height 150px 二段目：サンプル1の下に入る予定 */
<li>サンプル5</li> /* height 150px 二段目：サンプル2の下に入る予定*/
<li>サンプル6</li> /* height 150px 二段目：サンプル3の下に入る予定*/
</ul>

のようにサンプル1だけ高さが違うと、二段目ではサンプル4がサンプル2の下に入りサンプル1の下が空白になってしまいます。

また高さだけでなくwidthにも気をつける必要があります。

例えば以下のソースのように幅600pxで一段につき三つ商品を並べる場合、<li>ひとつの幅を200pxとしてしまうと、
IE6(Internet Explorer6)では一段に三つ入らずに二つだけ並べられ、二つめの後に大きな余白ができてしまいます。

これを回避するには、<li>の幅を予め小さく(この例なら195pxぐらい)
指定する必要があります。

#wrap{
width:600px
}

<div id="wrap">
<ul>
<li>サンプル1</li>
<li>サンプル2</li>
<li>サンプル3</li>
<li>サンプル4</li> /*　二段目：サンプル1の下に入る予定 */
<li>サンプル5</li> /* 二段目：サンプル2の下に入る予定*/
<li>サンプル6</li> /* 二段目：サンプル3の下に入る予定*/
</ul>
</div>

ちなみに、リストをfloatさせて並べる場合

*{
margin:0;
padding:0
}

もしくは

ul{
margin:0;
padding:0
}

を指定してください。これを指定しないとうまく回り込みません。

回答No.7

abril

質問者様の状況を考慮すると、ANo.6（hetare560様）の回答が最適ではないかと思います。商品一覧をリストと定義するのは理屈にもあっていますし。ちなみにマークアップという大前提を考えることなく何でもかんでも<div>でレイアウトするのは”div病”と揶揄されかねないので注意が必要です。現実問題としてデザインによっては<div>に頼らざるを得ない場合も多いのですが、適切なマークアップで実現可能であればそちらを目指しましょう。
私自身も商品一覧をその様な手法（リストタグでマークアップしてfloatでレイアウト）で作成した事があります。注意事項はANo.６でのご指摘の通りですが、もしも<li>の中が画像だけではなく更に子要素が入ってテキスト等も配置する場合は少々工夫が必要になる事もありますので、<li>のwidthとheightは中に入ると想定されるデータ量に対して余裕を持って指定されておいた方がよろしいかも知れません。
また、これも前後のブロックとの絡みとの兼ね合いによるのでケースバイケースですが、<ul>に直接widthを指定して支障なくレイアウトが実現できる様であれば、タグの入れ子も減りますのでそちらをおすすめします。

回答No.5

神崎 渉瑠（@taloo）

CMSとかショッピングカートシステムを使われてないなら、使ってみてはいかがでしょうか。
最初の設定や既存製品の登録が大変ですが、一度登録が終われば、更新は楽になります。

補足

ご回答、ありがとうございます！
実は、そのHPはすでにそのようなシステムを使っており、
ショッピングカートなどが付いた、詳細ページの作成までは
そのシステムで出来ているのですが、、

商品一覧ページを別で手打ちで作っているのです。。
そのページの更新についての質問です。

回答No.4

egoblock

テーブルじゃなくて<div>の中に<img>入れてfloatで並べればいいんじゃないですか？画像と画像の感覚はCSSで設定して…。

お礼

ご回答、ありがとうございます！
CSS勉強中なので、float調べていろいろ試してみます！
ありがとうございました☆

回答No.3

higekuman

<table>
　　<tr>
　　　　<td>(1)</td>
　　　　<td>(2)</td>
　　　　<td>(3)</td>
　　</tr>
　　<tr>
　　　　<td>(4)</td>
　　　　<td>(5)</td>
　　　　<td></td>
　　</tr>
</table>

こんな感じでインデントすると、間違いは少なくなると思いますが、そういうことを聞きたいわけじゃないのかな？

お礼

ご回答、ありがとうございます！
実際にはそのようにインデントして作成しています。
しかし、実際にはひとつひとつのtdの中にもtableがあったり、
実際には３０商品ぐらい並んでいたりするので、
更新が大変なのです。。
（上の方が完売になって削除をすると、20以上の商品を動かす必要があるのです。。）

回答No.2

hetare560

こんにちは。

簡単なのはリストで商品を並べて<li>をfloatする方法だと思います。

この方法なら追加すれば自動的に後ろにずれ、
削除すれば自動的に前に詰めます。

ただしこの方法だと各<li>が同じ高さでないとうまく周り込まないので、
うまく高さを調整する必要があります。

お礼

ご回答、ありがとうございます！
そのような方法があるのですね！
CSS勉強中なので、float調べていろいろ試してみます！
高さというのは、画像の高さ、とかということでしょうか。。？
知識不足ですみません！

回答No.1

shimix

JavaScriptでごにょごにょやれば出来そうな気はします（テーブルに入れる内容を配列で持って自前で書き出す）が、それよりもサーバ側のスクリプトで動的に作った方が楽だと思います。

＃CGI（Perl）とかphpとか

画像ファイル名（と場合によってはリンク先URL）を1行にして、テキストファイルに書いたものを保守すれば動的に書き換わる・・なんてことも比較的簡単に出来ると思います（練習問題レベルかな）。

お礼

ご回答、ありがとうございます！
申し訳ないのですが、知識不足で実際にどのようにしたらいいかが
まったく想像が付かないです。。ごめんなさい！
練習問題レベルなのですね、いろいろさらに調べてみます！

もしよろしかったら、その時に使う文字（tdとかfloatとか）
を教えてくだされば、あとは自分でいろいろ調べて勉強してみます！

pealという意味も最近覚えたばかりで。。
csvなどから情報を読み取れるんだなぁくらいにしか
実感がありません。。
すみません！