テーブルの線の色が指定できない

テーブルの線の色が指定できないうえ、最後に宣言したスタイルシートが適用されてしまいます。
理由がわかりません。

<style type="text/css">

table, td, th.bordercolor_white {
border: 1px white solid;
}

table, td, th.bordercolor_red {
border: 1px red solid;
}

</style>

<table class="bordercolor_white">
<tr>
<td>aaa</td>
<td>bbb</td>
</tr>
</table>

このような文だと、
<table class="bordercolor_white">としているのに、
なぜかテーブルの線の色は、赤になってしまいます。

table, td, th.bordercolor_red {
border: 1px red solid;
}

table, td, th.bordercolor_white {
border: 1px white solid;
}

のように、順番を入れ替えると、最後に宣言した白になります。

なので、<table class="bordercolor_white">の部分は無視されるようです。

二つのテーブルの線の色を用意した場合、
任意でテーブルの線の色を付ける方法をご教授ください。

No.1 回答者： t_ohta 回答日時： 2014/10/05 11:14

table, td, th.bordercolor_white {

border: 1px white solid;
}

と言う書き方だと
- tableタグ
- tdタグ
- thタグのbordercolor_whiteクラス
のボーダーが白色に指定されます。

なので、
table, td, th.bordercolor_white {・・・
table, td, th.bordercolor_red {・・・
と指定すると、クラス名で分けられるのはthタグだけです。
tableタグに対するボーダー指定が2回行われると、後から定義している方で上書かれるので赤色になります。
タグを指定した上でクラス名で分けたいなら
table.bordercolor_white, td.bordercolor_white, th.bordercolor_white {・・・
table.bordercolor_red, td.bordercolor_red, th.bordercolor_red {・・・
と書くべきですね。

No.2 回答者： ORUKA1951 回答日時： 2014/10/05 11:53

　基本中の基本で、borderなどのプロパティに取り掛かる前に、最初にきちんと身につけておかないと、class="bordercolor_white"というclassを書いてしまうとんでもない事をしてしまいますよ。

★HTMLは文書構造だけを記述する。プレゼンテーションに関わる物は書かない。
　プレゼンテーションに関わる要素、属性は廃止される。
　『スタイルシートによる代替が可能なHTMLのプレゼンテーション属性は、推奨しないこととなった。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』

　まずclass名ですが、これはDIVやSPAN要素に対しての『id属性及び class属性と併用することで、文書に構造を付加する』と同様にデザインのためではありません。たとえば将来枠線を黒くしたい時にHTMLを書き換えなければならなくなる。
[例]
<table summary="50音" borcer="1">
<!-- HTML4.01ではsummaryは必須、HTML5では任意、固有のsummaryがあれば、文書構造は明確になるのでidやclassはなくても良い -->
　<tboby><!-- 原則は必須、<thead><tfoot>もなく、本体が一つしかないときは省略できるが書いておいたほうが先で<tbody><thead><tffot>を追加したりするときに楽 -->
　　<tr>
　　　<th abbr="あ行">あ行</th>
　　　<td>あ</td><td>い</td><td>う</td><td>え</td><td>お</td>
　　</tr>
　</tbody>
</table>
<table summary="アルファベット" borcer="1">
　<tboby>
　　<tr>
　　　<th abbr="A～E">A-E</th>
　　　<td>A</td><td>B</td><td>C</td><td>D</td><td>E</td>
　　</tr>
　</tbody>
</table>
というふたつの表をHTMLでマークアップする。
　(注意)スタイルシートの説明を読んでいると、こうデザインするためにはHTMLにleft-menueとclass名をつける・・・なんて書いてありますが、それは説明のためです。
　本来はナビゲーションは左に配置する場合、事前にHTMLでは<div class="nav"></div>とclass名を使ってマークアップされているはずですので、div.nav要素は左に配置するにはスタイルを下記の様に記述する。・・でなければならない。
　そうするとHTMLもスタイルシートも、とっても楽になります。

★CSS(Cascading Style Sheets)の命ともいえるカスケーディング(Cascading)は正確にマスターしましょう。この知識なしでは、CSSは使えません。
・5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
・6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

上記の例ですと、５０音の表は赤枠で、アルファベットの表は青枠でしたら
table,th,td{
border:solid 1px black;
border-collapse:collapse;
}
/* 意味は、table th td タイプセレクタ　詳細度は0 0 0 1 */

table[summary],table[summary] th,table[summary] td{border-width:2px;}
/* summary属性を持つtable、その子孫のthとtdは枠線の太さは2px、他の属性はカスケードされる。なぜなら、詳細度が それぞれ、0 0 1 0、0 0 1 2、0 0 1 2 ですから */
/* 半角スペースは子孫セレクタです。 */

table[summary="50音"],table[summary="50音"] th,table[summary="50音"] td{
border-color:red;
}
/* これでsummary属性の値が50音のtableとその子孫であるth,tdは枠線が赤くなる */

table[summary="アルファベット"],
table[summary="アルファベット"] th,
table[summary="アルファベット"] td{
border-color:blue;
}
/* これでsummary属性の値がアルファベットのtableとその子孫であるth,tdは枠線が青くなる */

　先で色を変えたくなってもHTMLに手を加える必要はない。

　他にも様々なセレクタの書き方でスタイルを適用したい要素は指定できます。

table[summary]td+td{background-color:yellow;}
/* 2升目以降は黄色 */
table[summary]td+td+td{background-color:lime;}
/* 4升目以降はライム */









　　、