• ベストアンサー

●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)        のようにしたい。 または、新しい”0”という商品が出たときに、 B: 0 (1) (2) (3) (4) (5) というようにしたい。 というA・Bふたつの作業を多く行っています。 普段は、TDをコピーして、入れ替えをしています。 ただ、実際はTRがもっと多かったり、それぞれのTDの中に さらにTABLEが入っていて、ミスをしてしまったりと 時間をかけてしまっています。 これを、(3)を削除しただけで、ひとつ上の段に(4)がいったり、 0を追加しただけで、それぞれひとつ次の段にずれたり というしくみに変えることは可能でしょうか? 何かやり方があるような気がして調べていますが、 全くヒットしません。。。 どなたかご存知でしたら是非ご教授ください。 よろしくお願いいたします。

  • HTML
  • 回答数7
  • ありがとう数4

質問者が選んだベストアンサー

  • ベストアンサー
  • hetare560
  • ベストアンサー率66% (28/42)
回答No.6

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 } を指定してください。これを指定しないとうまく回り込みません。

その他の回答 (6)

  • abril
  • ベストアンサー率69% (388/560)
回答No.7

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

回答No.5

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

kana01068
質問者

補足

ご回答、ありがとうございます! 実は、そのHPはすでにそのようなシステムを使っており、 ショッピングカートなどが付いた、詳細ページの作成までは そのシステムで出来ているのですが、、 商品一覧ページを別で手打ちで作っているのです。。 そのページの更新についての質問です。

  • egoblock
  • ベストアンサー率22% (4/18)
回答No.4

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

kana01068
質問者

お礼

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

  • higekuman
  • ベストアンサー率19% (195/979)
回答No.3

<table>   <tr>     <td>(1)</td>     <td>(2)</td>     <td>(3)</td>   </tr>   <tr>     <td>(4)</td>     <td>(5)</td>     <td></td>   </tr> </table> こんな感じでインデントすると、間違いは少なくなると思いますが、そういうことを聞きたいわけじゃないのかな?

kana01068
質問者

お礼

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

  • hetare560
  • ベストアンサー率66% (28/42)
回答No.2

こんにちは。 簡単なのはリストで商品を並べて<li>をfloatする方法だと思います。 この方法なら追加すれば自動的に後ろにずれ、 削除すれば自動的に前に詰めます。 ただしこの方法だと各<li>が同じ高さでないとうまく周り込まないので、 うまく高さを調整する必要があります。

kana01068
質問者

お礼

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

  • shimix
  • ベストアンサー率54% (865/1590)
回答No.1

JavaScriptでごにょごにょやれば出来そうな気はします(テーブルに入れる内容を配列で持って自前で書き出す)が、それよりもサーバ側のスクリプトで動的に作った方が楽だと思います。 #CGI(Perl)とかphpとか 画像ファイル名(と場合によってはリンク先URL)を1行にして、テキストファイルに書いたものを保守すれば動的に書き換わる・・なんてことも比較的簡単に出来ると思います(練習問題レベルかな)。

kana01068
質問者

お礼

ご回答、ありがとうございます! 申し訳ないのですが、知識不足で実際にどのようにしたらいいかが まったく想像が付かないです。。ごめんなさい! 練習問題レベルなのですね、いろいろさらに調べてみます! もしよろしかったら、その時に使う文字(tdとかfloatとか) を教えてくだされば、あとは自分でいろいろ調べて勉強してみます! pealという意味も最近覚えたばかりで。。 csvなどから情報を読み取れるんだなぁくらいにしか 実感がありません。。 すみません!

関連するQ&A

  • tableを縦に続けるとtable間の空間が気になります

    tableを使ってHPを作っていますが、tableを下記のように縦にいくつも作っていると各table間が中途半端に隙間が出来てしまいます。もっと上下のtableをくっつけたいのですが何か方法は無いでしょうか? <table> <tr><td></td></tr></table> ------------ ここ ---------- <table> <tr><td></td></tr></table> ------------ ここ ---------- <table> <tr><td></td></tr></table>

    • ベストアンサー
    • HTML
  • <table>のclass指定が継承されない

    <table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。 HTMLを <table class="sample"> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table> とし、 cssを table, td { border: 2px #2b2b2b solid; } とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。 ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。 試しに、<td>にclassを指定しなおしてみると、そのセルにも囲み線が表示されました。 全<td>にclassを指定すれば問題ないのかもしれませんが、それではあまりにも使い勝手が悪いため、何とかhtmlは<table>のみにclassを指定することで全セルに反映させたいと思っています。 考えられる原因としてはどのようなものがありますでしょうか…?

    • ベストアンサー
    • CSS
  • table要素の使い道

    tableはレイアウトに使ってはいけないのは知っていますが、boxのなかに画像でリンクを作る簡単なメニューの場合は、リストとtableどちらを使ったほうがいいのでしょうか? こんな感じです。リストの場合はcssで同じような感じにします <table> <tr> <td><a href="#"><img src="a.png" alt=""></a></td> <td><a href="#"><img src="b.png" alt=""></a></td> </tr> <tr> <td><a href="#"><img src="c.png" alt=""></a></td> <td><a href="#"><img src="d.png" alt=""></a></td> </tr> </table>

    • ベストアンサー
    • HTML
  • win IEでのtableタグを入れ子にした場合のalign指定

    tableを2重で使用し、外側のtableのtdにalign="right"をつけると、内側のテーブルのテキストもrightになってしまいます。 win firefoxで確認しましたらrightになりませんでした。 この問題の回避方法を知っている方がおりましたらご教授いただけないでしょうか? よろしくお願いいたします。 ※ネットで調べようと思ったのですが、情けない事にキーワードがあいまいすぎて膨大な数しかヒットさせる事ができませんでした。 <html> <body> <table border="1" width="100%"> <tr>どうでしょうか?<td> </td> </tr> <tr> <td align="right"> <table> <tr> <td> test </td> </tr> </table> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • <table>を複数使用するレイアウトでの質問です。

    <table>を複数使用するレイアウトでの質問です。 <table width=30% align=left><tr><td>A</td></tr></table> <table width=70%><tr> <td width=20%>B-1</td> <td width=80%> <table width=100%><tr> <td width=25%>C-1</td> <td width=15%>C-2</td> <td width=15%>C-3</td> <td width=15%>C-4</td> <td width=15%>C-5</td> <td width=15%>C-6</td> </tr></table> </td> </tr></table> <table width=30% align=left><tr><td>D</td></tr></table> <table width=70%><tr> <td width=★%>E-1</td> <td width=☆%> <table width=100%><tr> <td width=20%>F-1</td> <td width=20%>F-2</td> <td width=20%>F-3</td> <td width=20%>F-4</td> <td width=20%>F-5</td> </tr></table> </td> </tr></table> ・”★%”は、(”B-1”+”C-1”)と同じ幅 ・”☆%”は、(100%-”★”)の値 ・F-1~5は20%としたのですが(=100%)、C-2~6と同じ幅になるかどうか どのようにすれば求められるかご指導お願い致します。

    • ベストアンサー
    • HTML
  • [table] colspanについて

    画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。 4列目にセルが4つあるので、3列目のcolspanの指定をどのように記述すればいいのか 不明で困っています。 ---------------------------------------------------- <table> <tr> <th></th> <th colspan="3"></th> </tr> <tr> <td></td> <td colspan="3"></td> </tr> ▼▼▼▼▼この列のrowspanの指定がわからない▼▼▼▼▼ <tr> <td></td> <td></td> <td></td> </tr> ▲▲▲▲▲この列のrowspanの指定がわからない▲▲▲▲▲ <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> </table> ---------------------------------------------------- どなたか解決案をご存知の方、お教えいただけないでしょうか? colspanにこだわっているわけではないので、cssで解決できるのであればcssでも大丈夫です。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • CSS tdのクラスを一部分だけ外したい

    Aのテ-ブルが格子状になるようCSSで設定しました。 その中にBのテーブルを入れ、このテーブルは罫線なしで表示したいのですが、 テーブルAのtdの設定がどうやっても消えてくれないので困っています。 ▼試した事 ・テーブルBのクラスをborder-style:none ・テーブルBのクラスに白い罫線を付けてみる ・テーブルBにスタイルでnoder-style:none ▼ソース(簡略) .t-a{ border-top:solid 1px #C4772B; border-right:solid 1px #C4772B;} .t-a td{ border-bottom:1px solid #C4772B; border-left:1px solid #C4772B;} <table class="t-a"> <tr> <td>テーブルA</td> <td>テーブルA</td> </tr> <tr> <td>  <table>  <tr>  <td>テーブルB</td>  <td>テーブルB</td>  <td>テーブルB</td>  </tr>  <tr>  <td>テーブルB</td>  <td>テーブルB</td>  <td>テーブルB</td>  </tr>  </table> </td> </tr> <tr> <td>テーブルA</td> <td>テーブルA</td> </tr> </table> テーブルBのborder-style:noneが反映されなかったので、テーブルBのCSSは削除していまいました。 力を貸してください。

    • ベストアンサー
    • HTML
  • <TABLE>タグの中に<OBJECT>タグは入れられないのでしょうか

    <TABLE><TR><TD> <OBJECT> <PARAM> </OBJECT> </TD></TR></TABLE> という感じであるアプリを組み込みたいのですが、TABLEの下に隠れているようで表示されません。 TABLEを透明にしたり、<OBJECT>をTABLEの上に持ってくることはできないのでしょうか。

    • ベストアンサー
    • HTML
  • ホームページで<TABLE>の簡易的な作成について

    私のホームページでテーブルを使用して写真を表示しています。 写真の表示にはメモ帳で、下記の様に記述し写真も2種類用意しています。 写真を用意するのは苦になりませんが、メモ帳で1枚1枚記述するのが大変なんです。 この作業が、VIXでできそうだという情報を頂きましたので、さっそくDLしてみました。 (gooへの質問が同様な質問で、申し訳ありません) まだ、操作していませんが下記の様な記述をファイルにして取り出すことは可能でしょうか? VIXでできそうならば、アドバイスをお願いします <TABLE> <TR> <Td>テスト</td> <Td>テスト</td>  ・ <Td>テスト</td> </TR> <TR> <TD><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td> <TD><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td>  ・ <Td><a href="2002\large02/(サイズ大).jpg"><IMG src="2002/before/(サイズ小).jpg"></a></td> </TR> </TABLE> ここでは、テーブルについて質問させて頂きましたが、他の方法でサムネール → 大きな写真と切り替えられればOKです。 この時にHP用の記述が取り出せると有難いです。 他のソフトでも結構です上手い方法はないでしょうか?

  • 特定のテーブルのみ枠線の色を消したい

    スタイルシートで他のテーブルの為に色を設定しているけど 特定のテーブルのみ、枠線の色をすべて消したい場合は、 どうすればよろしいでしょうか? <style type="text/css"> table {border:1px solid red;} table tr {border:1px solid red;} table th {border:1px solid red;} table td {border:1px solid red;} </style> <body> <table border=1 cellspacing=1 cellpadding=1> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=1 cellspacing=1 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table border=0 cellspacing=0 cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table cellpadding=1 bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> <br> <table bordercolor="FFFFFF"> <tr><td>a</td><td>b</td></tr> </table> このソースだと、テーブルならすべて枠線が付いてしまいます。 特定のテーブルのみ赤枠ではなく、白にして色を消したいのですがどうすればいいですか?

    • ベストアンサー
    • CSS