- ベストアンサー
シンプルなコードなのにテーブルにCSSが適用されない・・・
今回思い悩んで質問させて頂く事となりました。 すごい単純に書いてるつもりなのですが テーブルに着色 （青） （赤） が適用されません。 当方、本一冊の独学でやっているので大ポカと思うので ご指摘頂ければと思います。 以下コードです。 ------------------------------------------------ <title>無題ドキュメント</title> <style type="text/css"> <!-- #blue tr {background-color:blue;} #blue td {background-color:blue;} #red tr {background-color:red;} #red td {background-color:red;} --> </style> </head> <body> <table width="200" border="1"> <div id="blue"> <tr><td> </td></tr> </div> <div id="red"> <tr><td> </td></tr> </div> </table> </body> Dreamweaver上では着色されるのですが・・・ どなたかご教授お願い致します。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
> (1)<table><tr><td>にプロパティを付けず、ｃｓｓで着色する方法。 プロパティとはclassのことですよね？ classを使わずにCSSで着色するには tr {background-color:blue;} のように記述するしかなく、これだとテーブル内全てが青色になってしまします。 <tr><td>にclassを付けずに「行ごとに色の違うテーブル」を作るには少しトリッキーなやり方ですが [CSS] div.blue {background-color:blue;} div.red {background-color:red;} [HTML] <tr><td><div class="blue"> </div></td></tr> <tr><td><div class="red"> </div></td></tr> と記述するしかないですね。それ以外の方法だとJavaScriptを使って着色することもできますが、かえって面倒だと思います。 > (2)テーブル内になぜ<div>を使用してはいけないのか HTMLの定義はW3Cという団体が勧告を出していて、ブラウザはその勧告に準拠した形で動作するように作られています。 確実なことは言えませんが、テーブル、正確には<table>タグの直下に<div>タグを書いた場合の定義はこの勧告には書かれていません。 勧告に書かれていないものはブラウザはどのように動作してもいい(たいていそのタグは無視される)とことになります。 <table>タグの直下に<div>タグを書いてはいけないということではなく、書いたとしてもブラウザによって動作が異なる可能性が高いということです。 ちなみにW3Cの勧告通りにHTMLを書いてもブラウザによって動作が異なることがあるのが現状ですが…。
その他の回答 (3)
- x_jouet_x
- ベストアンサー率68% (162/236)
回答#2の補足です。 タグのID属性値に重複した値を使用することは基本的に可能ですが推奨されません。今回の質問では実害は生じませんが…。 例えば、 <table width="200" border="1"> <tr id="blue"><td> </td></tr> <tr id="red"><td> </td></tr> <tr id="blue"><td> </td></tr> <tr id="red"><td> </td></tr> </table> のように複数の<tr>タグに対してCSSを適用させたい場合はID属性ではなく、class属性を使用します。 その場合は下記のように記述します。 ---------- <style type="text/css"> <!-- tr.blue {background-color:blue;} tr.red {background-color:red;} --> </style> </head> <body> <table width="200" border="1"> <tr class="blue"><td> </td></tr> <tr class="red"><td> </td></tr> <tr class="blue"><td> </td></tr> <tr class="red"><td> </td></tr> </table> ----------
お礼
早期ご解答ありがとうございます。 して、このようなやり方をしているのは <td><tr>のタグにプロパティを付けず、テーブルに着色したく考えていました。 というのも、最終的にPHPを利用して、「行ごとに色の違うテーブル」をつくりたい考えていたからです。（プロパティを付けてもできますが、付けない方法、何故ダメだったかを知りたかったのです。） cssの自分の解釈は「id=blue内にある<td>は青に着色」と解釈していましたがどうやら、間違いみたいですね・・・ もしよろしければ (1)<table><tr><td>にプロパティを付けず、ｃｓｓで着色する方法。 (2)テーブル内になぜ<div>を使用してはいけないのか を教えて頂ければ嬉しいです。
- x_jouet_x
- ベストアンサー率68% (162/236)
<div> <tr>…</tr> </div> としていますが、この<div>タグが誤りではないでしょうか？ 通常、<table>タグの中に<div>タグを使用することはありません。 意図的に使用しているのであれば話は別ですが…。 記述されたHTMLを拝見すると<tr>タグの背景色を指定したいようなので、その場合は ---------- <style type="text/css"> <!-- tr#blue {background-color:blue;} tr#red {background-color:red;} --> </style> </head> <body> <table width="200" border="1"> <tr id="blue"><td> </td></tr> <tr id="red"><td> </td></tr> </table> ---------- のように<tr>タグにID属性を定義して、それに対してCSSが適用されるように記述します。
- SAYKA
- ベストアンサー率34% (944/2776)
divで囲んでいるからじゃない？ DTD的にはtable直下、tbody直下にはdivは置けないからね。 tableも別々ならtableにしても良いけど この場合はtableが1つだからtrにid指定が妥当じゃないかな
お礼
すいません、上から読んでましたｍ（_ _）ｍ テーブル内に<div>を入れてはいけないのは 構文的に決まっていたのですね。 ありがとうございます！
お礼
＞＞プロパティとはclassのことですよね？ その通りでございます（TT)スイマセン。 しかし <例> #top p { margin: 0px; padding: 0px;} が反応して今回の<tr><td>が反応しないのはどうもしっくりこないと思っています。 テーブルはそういったものと憶えるしかないのですかね・・・ と調べていたら、属性で継承するものと継承できないものがあることがわかりました！ 見事にbackground-colorが継承×と書かれていました。 これでやっとスッキリ眠れそうです。 SAYAKAさん x_jouet_xさん 非常に丁寧な解説ありがとうございました！