- ベストアンサー
このような表をもっとスッキリさせるには？
<table bgcolor="#000000" table style="font-size:12px" cellspacing="1" cellpadding="5" width="500" height=""> <colgroup width="20%"> <colgroup width="30%"> <colgroup width="50%"> <tr><td bgcolor="#FFFF00">あああ</td><td bgcolor="#FFFFFF">ああああ</td><td bgcolor="#FFFFFF">あああああ</td></tr> <tr><td bgcolor="#FFFF00">いいい</td><td bgcolor="#FFFFFF">いいいい</td><td bgcolor="#FFFFFF">いいいいい</td></tr> <tr><td bgcolor="#FFFF00">うううう</td><td bgcolor="#FFFFFF">うううう</td><td bgcolor="#FFFFFF">ううううう</td></tr> </table> ↑こんな感じで表を作っています。 【bgcolor="#FFFFFF"】のようなものがやたらに多いので、CSSを使ってもっとスッキリさせたいのですがどうCSSタグを配置したらよいのかわかりません。。 お分かりの方、是非教えてください！！
- haraheta
- お礼率83% (68/81)
- その他（インターネット・Webサービス）
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
私はこう書いた <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja-JP"> <HEAD> <META http-equiv="Content-Style-Type" content="text/css"> <STYLE type="text/css"> <!-- .table1{Font-Size:12px;BackGround-Color:#000000;Width:500;} .bg1{BackGround-Color:#FFFF00;Padding:5px;Width:20%;} .bg2{BackGround-Color:#FFFFFF;Padding:5px;Width:30%;} .bg3{BackGround-Color:#FFFFFF;Padding:5px;Width:50%;} /* それぞれの背景色などをCSSで定義する */ /* 先頭にドット「.」は忘れずに！ */ --> </STYLE> </HEAD> <BODY> <table class="table1" cellspacing="1"> <tr><td class="bg1">あああ</td><td class="bg2">ああああ</td><td class="bg3">あああああ</td></tr> <tr><td class="bg1">いいい</td><td class="bg2">いいいい</td><td class="bg3">いいいいい</td></tr> <tr><td class="bg1">うううう</td><td class="bg2">うううう</td><td class="bg3">ううううう</td></tr> <!-- class="～" で、定義したものを呼び出す。 --> <!-- ここではドットは書かない --> </table> </BODY> </HTML> 簡単に。 cellspacing=1をborder-spacing:1px;としてCSSに埋め込んでもIEでは適用されないのであえて残した。
その他の回答 (3)
- suzuki-_-
- ベストアンサー率77% (152/195)
よいしょ。 <html> <head> <style type="text/css"> <!-- #tbl1 {font-size:12px;width:500px;background:#000;} #tbl1 td {padding:5px;background:#fff;} #tbl1 .tdl {background:#ff0;} .cgr1 {width:20%;} .cgr2 {width:30%;} //--> </style> </head> <body> <table id="tbl1" cellspacing="1"> <tr><td class="cgr1 tdl">あああ</td><td class="cgr2">ああああ</td><td>あああああ</td></tr> <tr><td class="tdl">いいい</td><td>いいいい</td><td>いいいいい</td></tr> <tr><td class="tdl">うううう</td><td>うううう</td><td>ううううう</td></tr> </table> </body> </html> 以下回答者皆さんの後記同様。
お礼
いつの間にか回答ありがとうございます！！！！ みなさんの回答を参考に（というかそのままパクって！？）なんとか作成することができました！ まだまだ勉強しないと。。
- tux_the_penguin
- ベストアンサー率42% (69/163)
#1さんのは「id」を使うパターンですね。 んで、別解。「class」でもできます。 <html><head><title></title> <style type="text/css"> <!-- td.kiiro { background-color: #FFFF00; } td.shiro { background-color: #FFFFFF; } --> </style> </head><body> <table table style="font-size:12px" border="2" rules="all" cellspacing="1" cellpadding="5" width="500" height=""> <colgroup width="20%"> <colgroup width="30%"> <colgroup width="50%"> <tr> <td class="kiiro">あああ</td> <td class="shiro">ああああ</td> <td class="shiro">あああああ</td> </tr> <tr> <td class="kiiro">いいい</td> <td class="shiro">いいいい</td> <td class="shiro">いいいいい</td> </tr> <tr> <td class="kiiro">うううう</td> <td class="shiro">うううう</td> <td class="shiro">ううううう</td> </tr> </body></html> テーブルの枠は黒背景に重ねるよりも枠と指定してやるほうがいいのでは？そこのとこもスタイルシートに書くべきですけども(^^; ＃DOCTYPE他は省略しましたがちゃんと書いてくださいね
お礼
朝っぱらから返事ありがとうございました！！ いろいろとあるんですね まだまだ勉強しなくては。。
- himajin100000
- ベストアンサー率54% (1660/3060)
あってるかどうか知らんがとりあえず俺はこう書いた。 必要なHTTPヘッダはあるものとする。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <title>てすと</title> <style type="text/css"> table#pricetable{ background-color:#000000; border-collapse:separate; border-spacing:1px; width:500px; margin:auto;/* 好みの問題*/ } col#name{ background-color:#FFFF00; width:20%; } col#price{ background-color:#FFFFFF; width:30%; } col#discount{ background-color:#FFFFFF; width:50%; } th,td{ padding:5px; text-align:center; /* なんとなく好みの問題 */ font-size:12px; } </style> </head> <body> <table id="pricetable"> <caption>値段表</caption> <col id="name" /> <col id="price" /> <col id="discount" /> <!-- <thead> <tr><th>商品名</th><th>値段</th><th>割引率</th></tr> </thead> --> <tbody> <tr><td>りんご</td><td>400円</td><td>30%</td></tr> <tr><td>みかん</td><td>$5</td><td>60%</td></tr> <tr><td>れもん</td><td>時価</td><td>割引なし</td></tr> <tr><td>ぱいなっぷる</td><td>オープンプライス</td><td>割引なし</td></tr> </tbody> </table> </body> </html>
お礼
早朝から返答ありがとうございます！ ちょっとじっくり見てみます！
関連するQ&A
- テーブル内のテーブルの高さを揃えたい。
CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?
- ベストアンサー
- HTML
- 楽天ブログ・日記の下に表示のおすすめアイテムって・・・。
ブログ初心者です。 いつかはアフェリエイトまでできると良いな～と思っていますが、まだその前の段階ですでにつまづいております・・・（汗） メインの日記の下に、おすすめアイテムを載せられるように設定したのですが、こちらの画像は私自身で気にいった商品を載せられるのですよね・・・。 （もしかして、楽天の広告ページ？？） 【Recommend Item】ってタイトルに出ています。 今まで、自動的にブログの内容に合うようなアイテムが表示されているような気がしますが、好きな雑貨などを載せたいのですが・・・。 もし自分で出来るならどのように画像を載せればいいのでしょうか？？ たとえばですが、アフェリエイトのやり方のページで出ていたこの商品を載せたい場合、この部分をどこに載せるとブログのおすすめアイテムに載せられるのか教えてください。 すみません・・・。 パソコンが苦手で、↓これも間違っているのかな？と思っています。 <a href="http://***" target="_blank"> .:*:.*.:*:.2本ベルトのフォーマルシューズ .:*:.*.:*:. </a> ************** さらに、画像の載せ方が分からないのですが、こちらのテンプレートを製作した方は全然ブログをされていないようなので、もし、分かる方でいらっしゃったら教えてください！ コチラは、トップやアフェリエイト部分のテンプレートらしいのですが 。 <center><table cellspacing="3" cellpadding="0" width="560"><tr><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像１</td></tr></table></td></tr></table></td><td width="34%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像大２</td></tr></table></td></tr></table></td><td width="33%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0" style="border:2px solid #CCFFFF"><tr><td style="border:12px dotted #E0FFFF"><table cellspacing="0" cellpadding="2" style="border:2px dotted #CCFFFF" bgcolor="FFFFFF" width="140" height="140"><tr><td align="center" valign="middle">画像３</td></tr></table></td></tr></table></td></tr><tr><td colspan="3" align="right"><font style="font-size:10px"> </a></font></td></tr></table></center> 画像１・２・３の部分に、何を入れるとショップの商品とリンクするのでしょうか？？ どうぞ、よろしくお願いいたします。
- ベストアンサー
- ブログ
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width=\"800\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\" height=\"500\"> <tr bgcolor=\"#FFFF00\"> <td valigin=\"top\" valign=\"top\" colspan=\"4\" height=\"64\"> </tr> <tr> <td colspan=\"3\" height=\"2\"> </td> </tr> <tr> 【<td width=\"170\"> <table width=\"170\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\"> <tr> <td> </td> </tr> </table>】 </td> <td width=\"238\" height=\"352\"> </td> <td width=\"197\"> </td> </tr> <tr> <td colspan=\"3\"> </td> </tr> </table>
- 締切済み
- HTML
- テーブルの位置
最初からテーブルを一番上に持ってくるにはどうしたら良いですか？ＣＳＳで設定するのでしょうか？ 【】で囲ってある部分を最初から上にしたいのです。入れ子のようにしてテーブルを挿入すると必ず真中になってしまいます。 <table width="800" border="1" cellspacing="0" cellpadding="0" height="500"> <tr bgcolor="#FFFF00"> <td valigin="top" valign="top" colspan="4" height="64"> </tr> <tr> <td colspan="3" height="2"> </td> </tr> <tr> 【<td width="170"> <table width="170" border="1" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table>】 </td> <td width="238" height="352"> </td> <td width="197"> </td> </tr> <tr> <td colspan="3"> </td> </tr> </table>
- ベストアンサー
- HTML
- テーブルの作り方をご教示ください
図のようなテーブルを作りたいのですがどうすればいいのかわかりません。 図はエクセルで書きました。 ----------------------------------------------- <table border=0 cellspacing=0 cellpadding=0> <tr> <td> <table border=0 bgcolor="#000000" cellspacing=1 cellpadding=1 width="230"> <tr bgcolor="#FFFFFF"> <td> １ </td> </tr> <tr bgcolor="#FFFFFF"> <td> ２ </td> <tr bgcolor="#FFFFFF"> <td> ３ </td> </table> </td> </tr> </table> ----------------------------------------------- まではわかったのですが、 3と4を区切る方法がわかりません。 ご回答よろしくお願いします。
- ベストアンサー
- HTML
- tableをcssで表記したい
下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか？ tableの種類が一つの場合はできるのですが・・・ ＜table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"＞ ＜tr＞ ＜td width="30" bgcolor="#FFFFFF"＞a＜/td＞ ＜td "＞b＜/td＞ ＜/tr＞ ＜/table＞ ＜br＞ ＜table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"＞ ＜tr＞ ＜td width="25" bgcolor="#CCCCCC"＞c＜/td＞ ＜td＞d＜/td＞ ＜/tr＞ ＜/table＞
- 締切済み
- HTML
- スタイルシートの書き方
HPの中に以下のようなテーブルを並べて作っているのですが、後からまとめて編集しやすいようにCSSファイルを別に作ろうと思います。 自分であれこれ試してはいるのですが、スマートな（？）スタイルシートの書き方がいまいちわかりません。 どのように指定すればいいでしょうか？ 因みに下のタグもかなり自己流な部分があるのではないかと思うので、おかしいところがあれば指摘してください。 よろしくお願いします。 ------------------------------------------------------ <table border="0" bgcolor="#000000" cellspacing="0" cellpadding="0"> <tr> <td> <table border="0" cellspacing="1" cellpadding="2" width="500"> <tr><td bgcolor="#ffffff" width="150">AAA</td><td>BBB</td></tr> </table> </td> </tr> </table>
- ベストアンサー
- CSS
- 1pxの表を重ねたときにその重ねた部分が2pxになってしまいます
列数が違う表を重ねたのですが重ねた部分が2pxになってしまうので 重ねた部分も1pxで表示させたいのですがどうすればいいのでしょうか？ ソースはこちらです <TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6"> <TR BGCOLOR="#E3F0FB"> <TD>あ</TD> <TD>い</TD> </TR> <TR BGCOLOR="#E3F0FB"> <TD>う</TD> <TD>え</TD> </TR> </TABLE> <TABLE BORDER="0" WIDTH="400" CELLSPACING="1" CELLPADDING="5" BGCOLOR="#1C79C6"> <TR BGCOLOR="#E3F0FB"> <TD>↑の部分が2pxになるのを防ぎたいです</TD> </TR> </TABLE> 宜しくお願い致します。
- ベストアンサー
- HTML
- tdのスタイルシート
<table width="300" border="0"> <tr> <td height="10" bgcolor="#FFFFFF">1</td> </tr> <tr> <td height="10" bgcolor="#FFFFFF">2</td> </tr> <tr> <td height="10" bgcolor="#FFFFFF">3</td> </tr> </table> height="10" bgcolor="#FFFFFF"が連続しているHTMLをCSSで表示することは可能でしょうか？ height="10" bgcolor="#FFFFFF"をCSSで設定して、HTMLには書かないようにしたいのですが・・・
- ベストアンサー
- CSS
お礼
返答ありがとうございます！！！！！！！！ いろいろとやりかたがあるんですね。。 じっくりみてみます！！