- ベストアンサー
テーブルにCSSの枠のつけ方
はじめまして、こんにちわ。 HTMLで組んだテーブルにCSSの枠をつけたいと思っています。 ここのページhttp://www.rakuten.ne.jp/gold/royalparty/ の『NEW ITEMS』みたいに1列4行に枠をつけたい場合はどうしたら良いのでしょうか。よろしくお願いいたします。 組んだテーブルは下です。 <table class="newtable" cellspacing="0" cellpadding="0" border="0" width="610"> <tbody> <tr> <td class="photo" valign="middle" align="center" width="138"> 1-1 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-2 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-3 </a> </td> <td class="tdspace" valign="top" align="left" width="5" rowspan="3"> </td> <td class="photo" valign="middle" align="center" width="138"> 1-4</a></td> </tr> <tr> <td valign="top" align="left" width="138"> 2-1</a> </td> <td valign="top" align="left" width="138"> 2-2</a> </td> <td valign="top" align="left" width="138"> 2-3 </a> </td> <td valign="top" align="left" width="138"> 2-4</a> </td> </tr> <tr> <td valign="top" align="left" width="138">3-1</td> <td valign="top" align="left" width="138">3-2</td> <td valign="top" align="left" width="138">3-3</td> <td valign="top" align="left" width="138">3-4</td> </tr> </tbody> </table>
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
さきほど質問者さんに回答しようと思ったら、質問が突然消えてしまったので、そのときの回答をここに貼りますね。 ご質問のページのソースを参考に、すご～く単純化したものです。 <html> <head> <title>test</title> <style> body { background:#000000; color:#ffffff; } td.back { background-color:#191919; border:1px solid #5C5C5C;; width:169px; height:250px; text-align:center; } </style> </head> <body> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" class="back"> test1 </td> <td width="4"></td> <td valign="top" class="back"> test2 </td> <td width="4"></td> <td valign="top" class="back"> test3 </td> <td width="4"></td> <td valign="top" class="back"> test4 </td> </tr> </table> </body> </html> 今回のご質問は1列4行を３列になさりたいのかな、と思いますが、『NEW ITEMS』みたいにするんでしたらテーブルは３つ別にした方がいいでしょうね。
その他の回答 (1)
- xs200
- ベストアンサー率47% (559/1173)
ご質問のURLのようにしたいのなら、テーブルを使わない方が融通がきくし、ソースもわかりやすいと思いますが。 例えば、 <style type="text/css"> #wrapper { ;} .box {margin: 3px; width: 138px; height: 200px; border: 1px solid blue; float: left; } .photo {width: 130px; height: 130px; border: 1px solid yellow; } .text {width:130px; height: 50px; border: 1px solid red; } </style> <div id="wrapper"> <div class="box"> <div class="photo"> <img src="1.jpg" width="130" height="130" alt="" /> <div class="text">1だよ </div> </div> </div> <div class="box"> <div class="photo"> <img src="2.jpg" width="130" height="130" alt="" /> <div class="text">2だよ </div> </div> </div> <div class="box"> <div class="photo"> <img src="3.jpg" width="130" height="130" alt="" /> <div class="text">3だよ </div> </div> </div> </div> 数値はいい加減です。
お礼
ご返事が遅れましてすみません。 テーブルを使わないほうがソースがすっきりしていて見やすいですね。 参考にさせて頂きます＾＾ありがとうございます。
お礼
早々のご回答ありがとうございました。 前回質問した板が板違いかと思い消してこっちに書き直してしまいました＾＾； お察しの通り1列4行を３列にしたいと思っておりますので、ご回答頂いた内容を元に頑張ってコーディングしてみたいと思います（できるかな・・・ ありがとうございました＾＾