- ベストアンサー
効率的なテーブルのスタイル指定方法
テーブルのスタイル指定時（指定箇所）に、TRやTDのスタイルも同時に指定する方法なんてあるのですか？？？ その他、何か、テーブルのスタイル指定のエクセレントな方法や裏技があったら、教えてください！
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
質問の意味を取り違えていたらごめんなさい。 スタイルシートを利用すると、TRやTDを同時に指定することができます。 ============================ <html> <head> <style TYPE="text/css"> .image tr{ border:green 1px solid; } .image th{ background:blue url(image/back01.jpg) no-repeat fixed 50% 50%; } .image td{ background:red url(image/back02.jpg) no-repeat fixed 50% 50%; } </style> </head> <body> <table border="0" class="image"> <tr><th>sample</th></tr> <tr><td>sample</td></tr> </table> </body> </html> ============================= なお、このサンプルでは「image」という名のクラスで指定していますが、全てのTABLEタグを指定する場合は必要ありません。 参考URLは「とほほのWWW入門」です。 HTMLやCSS（スタイルシート）のリファレンスとして利用するなら最適なサイトです。
- 参考URL：
- http://tohoho.wakusei.ne.jp/
その他の回答 (2)
そもそもTABLEとTDで別にしてるから問題があるんじゃないかと思うんですが。 <html> <head> <style TYPE="text/css"> <!-- .aaa { height: 18; color: #ffffff; font-weight: bold; font-size: 18; background:red url(bg1.gif); } .bbb { height: 15; color: #000000; font-weight: normal; font-size: 12; background:blue url(bg2.gif); } --> </style> </head> <body> <table cellpadding=0 cellspacing=0 width="250"> <tr> <td class="aaa">sample</td> </tr> </table> <br> <table cellpadding=0 cellspacing=0 width="250"> <tr> <td class="bbb">sample</td> </tr> </table> </body> </html> こんなのじゃ駄目なんですか？
お礼
ご指摘のとおりすれば、オーサリングソフトでの指定も簡単になります。 そもそも、CSSというもの自体がHTMLと別個に一部分をクラス化?しているわけですから、クラス指定を二重にするなどということは、少し考えすぎなのかも知れません。 無理だということで諦め、スタイルシートが多少冗長になっても、クラス指定は一つですむようにし、既にスタイルシートという一枚のシートにまとめられていることで満足するのが賢明であり、ホームページ作成ソフトを使う上でも適切と悟りました。 スタイルをさらに分けて指定するなどということは、それを覆すようなよほどの技術的なメリットがない限り使わないのが使用法としては賢明ですね…。 少なくとも私には、そんなのがあってるみたいです。
「エクセレント」って言葉が好きなんですか？ ＞TRやTDのスタイルも同時に指定 ふつうに TR,TD { … } と記述すれば良いんじゃないかと思うんですが。 私見なのですがタグに依存するクラスを定義するよりも タグに依存しないクラスを定義したほうがスマートだと思います。
補足
次が、タグに依存するクラスなのか、タグに依存しないクラスなのかは、わかりませんが、つぎのような感じで指定できたらと思うのですが、うまく行かないのです…。これが目標の課題なのです。 <html> <head> <style TYPE="text/css"> .aaa table{ height: 18; color: #ffffff; font-weight: bold; font-size: 18; } .aaa td{ background:red url(bg1.gif); } .bbb table{ height: 15; color: #000000; font-weight: normal; font-size: 12; } .bbb td{ background:blue url(bg2.gif); } </style> </head> <body> <table cellpadding=0 cellspacing=0 width="250" class="aaa"> <tr><td>sample</td></tr> </table> <br> <table cellpadding=0 cellspacing=0 width="250" class="bbb"> <tr><td>sample</td></tr> </table> </body> </html>
補足
つぎのような感じで指定できたらと思うのですが、うまく行かないのです…。 なぜでしょう？？？ <html> <head> <style TYPE="text/css"> .aaa table{ height: 18; color: #ffffff; font-weight: bold; font-size: 18; } .aaa td{ background:red url(bg1.gif); } .bbb table{ height: 15; color: #000000; font-weight: normal; font-size: 12; } .bbb td{ background:blue url(bg2.gif); } </style> </head> <body> <table cellpadding=0 cellspacing=0 width="250" class="aaa"> <tr><td>sample</td></tr> </table> <br> <table cellpadding=0 cellspacing=0 width="250" class="bbb"> <tr><td>sample</td></tr> </table> </body> </html>