みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

table のバックグラウンドカラー

background-color は継承されないものだと認識しております。

・HTML内容
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>検証</title>
</head>
<table border="1" background="red">
<tr> <th>授業内容</th> <th>講義</th> </tr>
<tr> <td>1時間目</td> <td>国語</td> </tr>
<tr> <td>2時間目</td> <td>数学</td> </tr>
<tr> <td>3時間目</td> <td>英語</td> </tr>
<tr> <td>4時間目</td> <td>科学</td> </tr>
</table>
</body>
</html>

====ここまで====

ボタンを押す。⇒setStyleが動く⇒tableの背景が赤色で塗られる。動作までは分かるのですが、
td、thの部分の背景まで赤色になっています。

これは、テーブルと言う枠に、赤色が塗られ、その上にtd、thが置かれる。

結果、td、thの背景赤色は

(1)「td、thのbackgroundは指定していないため、デフォルトのtransparentが有効で、
テーブルの背景赤色が透けて見えている」
(2)「td、thに、tableのbackgroundが継承されて、赤く塗りつぶされていないということ」

の考えに間違いがないか確認させて頂きたいのです。
ご教授お願いします。

投稿日時 - 2012-03-07 19:32:28

QNo.7348585

すぐに回答ほしいです

質問者が選んだベストアンサー

テーブルの構造は以下の通りです。
http://www.w3.org/TR/CSS2/tables.html#table-layout

透けていれば下まで見えますし、透けてなければ一番上の物だけが見えます。
(現実世界の物が、後ろの物が見えないのと同じです。)

投稿日時 - 2012-03-08 08:54:36

お礼

>透けていれば下まで見えますし、透けてなければ一番上の物だけが見えます。

やはり、そういうことですね。
すっきりしました。

ありがとうございました。

投稿日時 - 2012-03-10 16:21:51

ANo.2

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

HTMLが間違っている
table要素にbackground属性はありません。
 →11.2.1 TABLE要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.1 )
 bgcolorです。非推奨です。( http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/present/graphics.html#adef-bgcolor )

 継承されるされないは、カスケーディングスタイルシートでの話です。

正しく書くと
<table border="1" summary="schedule"><!-- summaryは必須 -->
 <thead>
  <tr>
   <th abbr="内容">授業内容</th><th abbr="講義">講義</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1時間目</td><td>国語</td>
  </tr>
  <tr>
   <td>2時間目</td><td>数学</td>
  </tr>
  <tr>
   <td>3時間目</td><td>英語</td>
  </tr>
  <tr>
   <td>4時間目</td><td>科学</td>
  </tr>
 </tbody>
</table>
となりますかね。

 スタイルシートでは、background-colorは、継承しないプロパティであり、かつ初期値がtransparentですから、(1)であるか(2)であるかは判断できませんが、スタイルシートで
table[summary="schedule"]{/* 詳細度 0 0 1 1 */
backgoound-color:blue;
border-collapse:separate;
border-spacing:10px;
}
table[summary="schedule"]:hover{
backgoound-color:blue;
}
table[summary="schedule"] *{ /* 詳細度 0 0 1 1 */
background-color:white;
}
とでもすれぱ歴然
★table[summary="schedule"] td とすると詳細度が 0 0 1 2になるのでテストにならないので全称セレクタで指定してある。

投稿日時 - 2012-03-08 00:23:42

お礼

>table要素にbackground属性はありません。
なるほど。また一つ勉強させて頂きました。

詳細に補足していただき
ありがとうございました。

投稿日時 - 2012-03-10 16:22:49