※ ChatGPTを利用し、要約された質問です(原文:table のバックグラウンドカラー)
このQ&Aのポイント
HTMLのtable要素において、background-colorプロパティが継承されないことについて疑問があります。
tableの背景色が赤色で塗られる際に、tdやthの背景色も赤くなるのはなぜでしょうか?
tdやthの背景色が赤くなる理由に関して、以下の2つの考えがあります。1つ目は、tdやthのbackgroundプロパティが指定されていないため、デフォルトの透明な背景が有効となり、tableの背景色が透けて見えるという理由です。2つ目は、tdやthにtableのbackgroundプロパティが継承されていないため、赤い背景色が適用されないという理由です。どちらが正しいのでしょうか?
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が継承されて、赤く塗りつぶされていないということ」
の考えに間違いがないか確認させて頂きたいのです。
ご教授お願いします。
お礼
>透けていれば下まで見えますし、透けてなければ一番上の物だけが見えます。 やはり、そういうことですね。 すっきりしました。 ありがとうございました。