- 締切済み
tdのクラスの使い方
<style type="text/css"> <!-- table { border: 1px red solid; padding:30px 30px; } </style> <body> <table border=3> <tr><td>test</td><td>test</td></tr> <tr><td>test</td><td>test</td></tr> </table> これだと、赤いテーブルの内側のみしかpaddingが有効にならないのですが、 黒いテーブルの枠もpaddingするには、 td { padding:30px 30px; } とするしかないのでしょうか？ クラス名を付けて、やりたいテーブルのtdタグだけ適用させたい場合は、 td.aaa { padding:30px 30px; } として、 <table border=3> <tr><td class="aaa">test</td class="aaa"><td class="aaa">test</td class="aaa"></tr> <tr><td class="aaa">test</td class="aaa"><td class="aaa">test</td class="aaa"></tr> </table> のように、すべてのtdタグにクラス名を付けるしかないのですか？
- ixfzqyrdte
- お礼率80% (24/30)
- HTML
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
tableをしっかり理解しましょう。 tdやthはtableではなくセル(cell)です。 ★スタイルシートでは、table要素、tr要素、th要素、td要素は個別に指定できます。 borderは継承されませんからtableに指定してもその子孫には適用されない。 ★指定がない場合は、ブラウザが持つデフォルトのスタイルシートが適用されます。 仕様書どおりに厳密に書くと・ <table border="3" summary="テストの表"><!-- summaryは必須 --> <tbody><!-- tbodyは本来は書くべき --> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> 構造が分かりやすいように全角文字でインデントさせています。 タイプセレクタ table{}という指定で、HTMLのtable要素すべてに適用されます。 ※ただしtable要素のみ。 table{ border-collapse: separate;/* 分離ボーダーモデル、結合モデルのときはcollapse */ border-spacing: 5px; /* 分離ボーダーモデルのときのセル間の間隔 */ padding: 5px; border-style: solid; border-width: 3px; border-color: red;/* まとめてborder: solid red 3px;とも書ける */ border-right-width:6px; border-bottom-color: green;/* このように個別に指定もできる */ } th,td{ border: solid 1px blue; padding:1em 2em; } 二行目以降の枠線の色を変えたければ tr+tr th,tr+tr td{border-color:lime;} 二列目以降なら td + td,th + th{border-style:dotted;} 二行目だけなら tr:nth-child(2){background-colr:yellow;} 色々なテーブルの中で、このtableだけなら table[summary="テストの表"]{ border-collapse: separate; border-spacing: 5px; padding: 5px; border: solid red 3px; border-right-width:6px; border-bottom-color: green; } table[summary="テストの表"] th, table[summary="テストの表"] td{ border: solid 1px blue;padding:1em 2em; } table[summary="テストの表"] tr+tr th, table[summary="テストの表"] tr+tr td{border-color:lime;} table[summary="テストの表"] td + td, table[summary="テストの表"] th + th{border-style:dotted;} table[summary="テストの表"] tr:nth-child(2){background-colr:yellow;} とすれば他のtableにはsummaryの値が同じでない限り適用されない。 以上、まず試してください。 ＞すべてのtdタグにクラス名を付けるしかないのですか？ ・クラス名はあくまで文書の構造を保管するためで、デザインのために書くのではありません。 ・クラス名はなくとも、指定はできます。 CSS(カスケーディングスタイルシート)は、そのカスケーディング（次々に影響を与えていく）の機能があるから、優れていてウェブ標準として活用されているのです。 このカスケーディングの仕組みを知らないと「デザインのためにクラスをつける」なんて、本末転倒になってしまう。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html )
- ONEONE
- ベストアンサー率48% (279/575)
スタイルシートではスペースで区切ると子要素や孫要素を指定できます。 例えばtableにclassなりidをつけて <table class="abc"> <tr><td>test</td><td>test</td></tr> <tr class="second"><td>test</td><td>test</td></tr> </table> と書いたとき table.abc td{ } と書けば、abcクラスのテーブルの中のtdを指定できます。 直下のを指定したい場合は>を使います。 table.abc > tr.second > td{ } どういうセレクタがあるか、全体的に知っておいたほうがいいです。 流し読みでもいいので一通り押さえておくといいでしょう。 ※閉じタグにまでclassが入ってますよ…笑
- ONEONE
- ベストアンサー率48% (279/575)
スタイルシートではスペースで区切ると子要素や孫要素を指定できます。 例えばtableにclassなりidをつけて <table class="abc"> <tr><td>test</td><td>test</td></tr> <tr class="second"><td>test</td></tr> </table> と書いたとき table.abc td{ } と書けば、abcクラスのテーブルの中のtdを指定できます。 直下のを指定したい場合は>を使います。 table.abc > tr.second > td{ } どういうセレクタがあるか、全体的に知っておいたほうがいいです。 流し読みでもいいので一通り押さえておくといいでしょう。 ※閉じタグにまでclassが入ってますよ…笑
