- ベストアンサー
テーブルに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>
- shibuyaSt
- お礼率50% (2/4)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （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> 数値はいい加減です。
お礼
ご返事が遅れましてすみません。 テーブルを使わないほうがソースがすっきりしていて見やすいですね。 参考にさせて頂きます＾＾ありがとうございます。
関連するQ&A
- tableでレイアウトが崩れる場合
技術の足りなさからCSSにできなかったので、再度テーブルでサイズを指定してやってみようとしているところです。 どこかの数字がおかしくなっていると思うのですが、どうしてもわかりません。 ちゃんと表示できるブラウザとそうでないブラウザがあり、Firefoxは環境設定により表示が崩れる場合があります。 使用ソフトはビルダーの１１です。 なんでも良いのでどうぞアドバイスをよろしくお願い致します。 <body> <div ALIGN="center"> <table> <tbody> <tr> <td CLASS="td4" HEIGHT="70"> <table WIDTH="600" CELLSPACING="1" CELLPADDING="0"> <tbody> <tr> <td VALIGN="top" CLASS="td1" WIDTH="400" ALIGN="left" HEIGHT="180"> <b>文字 <textarea ROWS="15" COLS="70">文字</textarea><br> <br> </td> <td VALIGN="top" CLASS="td1" WIDTH="100" HEIGHT="180"> <table CELLSPACING="0" CELLPADDING="4"> <tbody> <tr> <td CLASS="td2" HEIGHT="16" WIDTH="100">文字</td> </tr> </tbody> </table> 文字 <br> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <br> </div> </body>
- ベストアンサー
- HTML
- テーブルが一行下がる・・・
HTMLを作成していて、横一列に並べたいのに何故か一行下がってしまいます。 具体的には、 <TABLE width="50" border=1 align=left> <TBODY> <TR><TD noWrap align=middle>項目A</TD> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> </TABLE> <TABLE width="20" border=1 align=middle> <TBODY> <TR><TD noWrap align=middle>タイトル</TD></TR> </TBODY> </TABLE> <TABLE width="50" border=1 align=right> <TBODY> <TR><TD noWrap align=middle>項目B</TD></TR> <TR><TD noWrap align=middle Height=80><BR></TD></TR> </TBODY> というソースで、「項目A」→「タイトル」→「項目B」と横一線に並べたいのですが、何故か「項目B」が一行下がって表示されます・・・ HTMLを作るのは初めてで、色々と調べたのですがよく分かりませんでした・・・。 どなたか助けてください！！ よろしくお願い致しますm(_ _)m
- ベストアンサー
- HTML
- background-color ｃｓｓ
目的：社員のスケジュール表を作りたいです。 出勤、休み、緊急休みを一目瞭然に表で表現したいですが、そのやり方が分からないです、ご存知の方々教えてお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "?http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="?http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-31j" /> <title>表</title> <style> <!-- .open{ background-color:rgb(255,255,255); } .holiday{ background-color:rgb(166,166,166); } .rest_holiday{ position:relative; filter:alpha(opacity=50); background-color:rgb(255,0,0); } .rev{ background-color:rgb(185,205,229); } --> </style> </head> <body> <table border="1" cellspacing="1"> <tr> <td valign="top"> <table border="1" cellspacing="0" width="60" > <tr align="center"> <td height="23" >名前</td> </tr> <tr align="center"> <td ></td> </tr> <tr align="center"><td>田中</td></tr> <tr align="center"><td>島村</td></tr> <tr align="center"><td>喜田村</td></tr> <tr align="center"><td>林義夫</td></tr> </table> </td> <td valign="top" > <table width="00" cellpadding="0" cellspacing="0" border="1"> <tr align="center"> <td width="100" height="23" colspan="2" >10時</td> <td width="100" height="23" colspan="2">11時</td> <td width="100" height="23" colspan="2" >12時</td> </tr> <tr > <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> <td width="25" height="23" valign="top" class="holiday"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="rev"> </td> <td width="25" height="23" valign="top" class="open"> </td> </tr> <tr > <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rest_holiday"> </td> <td width="25" height="23" valign="top" class="rev"> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- HTML
- Dreamweaverのデザインで表示がおかしい時
IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか？ <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL> </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>
- ベストアンサー
- ホームページ作成ソフト
- フレームの上下でテーブルの横幅を合わせたい場合
パソコン用ホームページでフレームを使用したページを作成中なのですが、メニューを上フレームに横並びにして記述したので、それと同じ幅のテーブルを下フレームにも作りたいのです。 しかし！ブラウザが違うと横幅が違ってしまうので困っています。 下にタグを記述します。 なんでもいいのでアドバイスをお願い致します。 <html> <head> <title>テスト</title> </head> <body> <div align="center"> <table cellspacing="1" cellpadding="0"> <tbody> <tr> <th valign="top" class="td1" align="left"> あああ </th> <td width="200"> ううう </td> </tr> <tr> <td> <textarea rows="15" cols="70">いいい</textarea> </td> <td valign="top" class="td1"> えええ </td> </tr> </tbody> </table> <br> </div> </body> </html>
- ベストアンサー
- HTML
- テーブルの位置指定について
html編集で困っています。 <TABLE cellpadding="0" border="3" bordercolor="black" style="float:left;"> <TR> <TD rowspan="3" valign="bottom" align="center" width="76" height="75" background="background.jpg"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="95" height="25"><font face="" color="#ffffff" size="1"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="50" height="25"><font face="" color="#ffffff" size="2"></font></TD> <TD rowspan="2" valign="bottom" align="left" width="40" height="25"><font face="" color="#ffffff" size="1"></font></TD> </TR> </TABLE> というようにテーブルを組みました。 このテーブル全体を、ページ全体の中で、 左右では左寄せ、上下では中央 に配置するにはどうすればいいのでしょうか。 パソコンの画面の大きさの違いでデザインが崩れてしまうので、上のような形に配置できればとてもうれしいです。 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- IEでのテーブル幅
質問させて下さい。 テーブルのソースが以下のようになっています。 <table width="450" height="300" border="1" cellpadding="10" cellspacing="0" bordercolor="#333333"> <tr> <td width="225" height="150" align="left" valign="top">あああああああああああああああああああああああ</td> <td width="225" height="300" rowspan="2" background="haikei.jpg"> </td> </tr> <tr> <td width="225" height="150" align="left" valign="top">いいいいいいいいいいいいいいいいいいいいいい</td> </tr> </table> このときに、ファイアーフォックス3での表示と、IE8での表示に 違いが大きいんです。（IEの表示の方が縦が長くなります） このままだと右側の背景画像の高さと左のテキストの高さが あいません・・・それぞれのテーブル幅などの指定はきちんと しているつもりなのですが、どうすれば良いのでしょう。 CSSの利用はなしとして、どなたか教えて頂けないでしょうか。
- ベストアンサー
- HTML
- 表（table）の字の大きさの設定
ブログに表を載せたいと思って調べているところなのですが、↓のようにして、入力すると、字が１４くらいの大きさになってしまいます。９くらいの小さめの字にしたいのですが、字の大きさは、どのように入力すれば良いのでしょうか？教えて下さい。どうぞ宜しくお願い致します。 <div align="center"> <table border=1><tr><tdalign="center"colspan="3"bgcolor="#99ee66">あ<BR>あ</td></tr><tr><td align="center" colspan="3"bgcolor="#ffcd59">あ</td></tr><tr><td width="30" align="left" valign="top" bgcolor="#efefde">あ</td><td width="45" align="left" valign="top" bgcolor="#efefde">あ</td><td align="left">・あ<BR>あ</td></tr><td width="30" align="left" valign="top" bgcolor="#efefde">あ</td><td width="45" align="left" valign="top" bgcolor="#efefde">あ</td><td align="left">あ</td></tr></table></div>
- ベストアンサー
- HTML
- テーブルの縦が縮まらない
質問させて下さい。テーブルで表を作ったのですが、縦幅が 縮まらなく困っています。 具体的には、セル内の余白を５ピクセルにしているのですが テキストとセルの境界線の縦の距離が何倍も開いてしまいます。 ソース↓ （ボディ内はこれで全てです。テキストを変えただけです。 使用ソフトはドリームウィーバー８） --------------------------------------------------------- <table width="490" height="395" cellpadding="0" cellspacing="0" bgcolor="#666666"> <tr> <td width="490" height="393"> <table width="100%" height="100%" border="0" cellpadding="5" cellspacing="1"> <tr> <td width="121" height="35" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td width="344" height="35" align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> <tr> <td height="22" align="center" valign="middle" bgcolor="#FFCCFF"><font color="#333333" size="2">ああああ</font></td> <td align="left" valign="middle" bgcolor="#FFFFFF"><font color="#333333" size="2">あああああああああ</font></td> </tr> </table> </td> </tr> </table> --------------------------------------------------------- 試したこと：各セルの縦幅を揃えて指定してみる。指定を全て 外してから、再度調節してみる。セル内のテキスト 表示位置を上位置に設定してみるなどです。。。 どこかすごい見落としをしているのでしょうか。よろしくお願い します。
- ベストアンサー
- HTML
お礼
早々のご回答ありがとうございました。 前回質問した板が板違いかと思い消してこっちに書き直してしまいました＾＾； お察しの通り1列4行を３列にしたいと思っておりますので、ご回答頂いた内容を元に頑張ってコーディングしてみたいと思います（できるかな・・・ ありがとうございました＾＾