ベストアンサー

このような表をもっとスッキリさせるには？

2007/02/01 03:57

<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)

みんなの回答 （4）
専門家の回答

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

ベストアンサー

Pacifier
ベストアンサー率44% (30/68)

2007/02/01 05:33 回答No.2

私はこう書いた <!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">  </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>   </table> </BODY> </HTML> 簡単に。 cellspacing=1をborder-spacing:1px;としてCSSに埋め込んでもIEでは適用されないのであえて残した。

質問者

お礼 2007/02/01 12:40

返答ありがとうございます！！！！！！！！いろいろとやりかたがあるんですね。。じっくりみてみます！！

その他の回答 (3)

suzuki-_-
ベストアンサー率77% (152/195)

2007/02/02 01:14 回答No.4

よいしょ。 <html> <head> <style type="text/css">  </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> 以下回答者皆さんの後記同様。

質問者

お礼 2007/02/02 21:43

いつの間にか回答ありがとうございます！！！！みなさんの回答を参考に（というかそのままパクって！？）なんとか作成することができました！まだまだ勉強しないと。。

tux_the_penguin
ベストアンサー率42% (69/163)

2007/02/01 05:39 回答No.3

#1さんのは「id」を使うパターンですね。んで、別解。「class」でもできます。 <html><head><title></title> <style type="text/css">  </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他は省略しましたがちゃんと書いてくださいね

質問者

お礼 2007/02/01 12:41

朝っぱらから返事ありがとうございました！！いろいろとあるんですねまだまだ勉強しなくては。。

himajin100000
ベストアンサー率54% (1660/3060)

2007/02/01 05:17 回答No.1

あってるかどうか知らんがとりあえず俺はこう書いた。必要な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" />  <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>

質問者