tdのクラスの使い方

締切済

質問者：ixfzqyrdte
質問日時：2014/10/26 20:18
回答数：3件

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

最新から表示
回答順に表示

No.3

回答者： ORUKA1951
回答日時：2014/10/27 09:59

tableをしっかり理解しましょう。

tdやthはtableではなくセル(cell)です。
★スタイルシートでは、table要素、tr要素、th要素、td要素は個別に指定できます。
　borderは継承されませんからtableに指定してもその子孫には適用されない。
★指定がない場合は、ブラウザが持つデフォルトのスタイルシートが適用されます。

仕様書どおりに厳密に書くと・
<table border="3" summary="テストの表">
　<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/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

- 0
- 件

通報する

No.2

回答者： ONEONE
回答日時：2014/10/26 21:10

スタイルシートではスペースで区切ると子要素や孫要素を指定できます。

例えば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が入ってますよ…笑

- 0
- 件

通報する

No.1

回答者： ONEONE
回答日時：2014/10/26 21:03

スタイルシートではスペースで区切ると子要素や孫要素を指定できます。

例えば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が入ってますよ…笑