tableのバックグラウンドカラーに関する疑問

2023/08/16 00:44

このQ&Aのポイント

HTMLのtable要素において、background-colorプロパティが継承されないことについて疑問があります。
tableの背景色が赤色で塗られる際に、tdやthの背景色も赤くなるのはなぜでしょうか？
tdやthの背景色が赤くなる理由に関して、以下の2つの考えがあります。1つ目は、tdやthのbackgroundプロパティが指定されていないため、デフォルトの透明な背景が有効となり、tableの背景色が透けて見えるという理由です。2つ目は、tdやthにtableのbackgroundプロパティが継承されていないため、赤い背景色が適用されないという理由です。どちらが正しいのでしょうか？

ベストアンサー

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

2012/03/07 19:32

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が継承されて、赤く塗りつぶされていないということ」の考えに間違いがないか確認させて頂きたいのです。ご教授お願いします。

ShiftTail
お礼率80% (423/528)

CSS
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

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

ベストアンサー

神崎渉瑠（@taloo）
ベストアンサー率44% (1016/2281)

2012/03/08 08:54 回答No.2

テーブルの構造は以下の通りです。 http://www.w3.org/TR/CSS2/tables.html#table-layout 透けていれば下まで見えますし、透けてなければ一番上の物だけが見えます。（現実世界の物が、後ろの物が見えないのと同じです。）

質問者

お礼 2012/03/10 16:21

>透けていれば下まで見えますし、透けてなければ一番上の物だけが見えます。やはり、そういうことですね。すっきりしました。ありがとうございました。

その他の回答 (1)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/03/08 00:23 回答No.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"> 　<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/10 16:22

>table要素にbackground属性はありません。なるほど。また一つ勉強させて頂きました。詳細に補足していただきありがとうございました。

関連するQ&A

テーブルの背景をマウスオーバーで変える
お世話になりますよろしくお願いします phpMyAdminをみてやってみようと思ったのですがテーブルのセルをマウスオーバーで背景の変更はできないでしょうか？ FireFoxだとうまくいくのにIEだとうまくいきません。 IEは未対応と聞いたのですが実際phpMyAdminでは動いています。どうやれば一緒のことができるのでしょうか？ phpMyAdminからそれっぽいソースは見つけたのですがうまくいきませんでした <style type="text/css"> /* odd table rows 1,3,5,7,... */ table tr.odd th, table tr.odd { background-color: #CCCCCC; } /* even table rows 2,4,6,8,... */ table tr.even th, table tr.even { background-color: #666666; } /* hovered table rows */ table tr.odd:hover, table tr.even:hover, table tr.odd:hover th, table tr.even:hover th, table tr.hover th, table tr.hover { background-color: #FFF000; } --> </style> <body> <table> <tr class="odd"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> <tr class="even"><td>マウスを乗せると背景色が変わる</td><td>マウスを乗せると背景色が変わる</td></tr> </table> 以上よろしくお願いします
- ベストアンサー
- HTML
bgcolorとbackground-color
タグ打ちで、bgcolorとbackground-colorは一緒ですか？？一緒として話しを進めます。 <table> <tr><td bgcolor="#e1e1e1"></td></tr> <tr><td bgcolor="#d1d1d1"></td></tr> </table> なら、セルの色を変更出来ましたが、 <table> <tr><td background-color="#e1e1e1"></td></tr> <tr><td background-color="#d1d1d1"></td></tr> </table> だと、セルの色を変更できません。なぜですか？？ bgcolorとbackground-colorは違うのですか？？使う場所がそれぞれ決まっているとか？？気になってます。教えて下さい。
- ベストアンサー
- ブログ
テーブルの背景を変える
js(外部ファイル)から呼び寄せる方法で１段目と３段目のセルが赤、２段目と４段目のセルが青にする方法分かりやすくいいますと、奇数が赤、偶数が青になる方法を教えてもらいたいです。 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <table border="1"> <col span="6" width="85" align="center"> <th>ID</th> <th >NO</th> <th >Name</th> <th >身長</th> <th>体重</th> <th >その他</th> </table> <table border="1"> <col span="6" width="85" align="center"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
tableセルに色を付ける
　tableセルに色を付けます。　で、行で指定しようとtrタグにbgcolorをいれました。　ネスケでは問題ないのですが、ie6だとテーブルの外にも色がついてしまい変です。　セルを結合させたりしたりしてることが影響あるのでしょうか？ieのバグですかね？　コレを解決するには、trで色を付けるのを諦めて、セルごと（tdやth）に指定していくしかないのでしょうか。　スタイルシートは使わない前提です。htmlだけでの解決があったら教えてください。 <html> <head> </head> <body> <table border="10" align="center"> <tr> <th colspan="2">タイトル</th> </tr> <tr> <td height="70" rowspan="2" align="center" valign="top">１</td> 　<td>あ</td> </tr> <tr> 　<td>い</td> </tr> <tr bgcolor="red"> 　<td>２</td> 　<td>う</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
マウスカーソルを乗せた時にテーブルの行の色を変える
マウスカーソルがテーブルの行の上に来た時に行の色を変えたくて以下のようにCSSとHTMLを書いてみました。しかし、何の変化もありませんでした。どこが悪いのかわかりますでしょうか。【CSS】 table tr:hover { background:red; } 【HTML】 <html> <head> <script type="text/javascript" src="./jquery-1.9.1.js"></script> <link rel="stylesheet" href="test.css" type="text/css"> <script> </script> </head> <body> <table border="1"> <thead> <tr> <th>名前</th> <th>金額</th> </tr> </thead> <tbody> <tr> <td>abc</td> <td>3000</td> </tr> <tr> <td>xyz</td> <td>100</td> </tr> <tr> <td>myk</td> <td>20000</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- CSS
FireFoxでテーブルのbackgroundが表示されない
テーブルレイアウトで、IEでは正しく表示されているbackgroundカラーがFireFoxでは表示されません。文字が見えなくなってしまい大変困っています。 CSS初挑戦だったので、そもそもコードが正しくないのかも知れません。調べたのですが解決策がわかりません。どなたかご存知の方いらっしゃいましたらよろしくお願いいたします。下記コードです。 /*CSS*/ TABLE.SAMPLE { table-layout: fixed; width: 500px; background:"#FFFFCC"; } td.td_hd { background:"#000066"; color:Silver; font-size: 12pt; } /*HTML*/ <table class=SAMPLE> <tr> <td class=td_hd>ヘッダタイトル</td> </tr> <tr> <td>あああああああああああああああああああああああああああああ</td> </tr> </table>
- ベストアンサー
- HTML
一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで右側の2列目のtdタグを右詰にしたいのですが、一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
HTMLのテーブルについて
HTMLのテーブルについて今、HTMLを勉強しています。下記のようにテーブルを作成し一部にセルの結合を行ったところ、(2)の結合したセル右端から外枠までが広がってしまいます。せっかく綺麗に見えるように上の表と下の表のセル幅を合わせても、上の表の右端が出っ張ってしまって意味がありません。これを解決するにはどのように改善すればいいのでしょうか？ <html> <head> <title>A</title> </head> <body> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>１</td> <td>Ａ君</td> <td>(1)</td> </tr> <tr> <td>１</td> <td>Ｂ君</td> <td rowspan="2">(2)</td> </tr> <tr> <td>１</td> <td>Ｃ君</td> <td></td> </tr> </table> <br> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>２</td> <td>Ｄ君</td> <td>(3)</td> </tr> <tr> <td>２</td> <td>Ｅ君</td> <td>(4)</td> </tr> <tr> <td>２</td> <td>Ｆ君</td> <td>(5)</td> </tr> </table> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
テーブルの行の背景色をマウスオーバー時に変えたい
<table>で表を作成しています。表の行がマウスオーバーされたときに、その行の背景色が変わるようなページを作っています。 1行ずつなら css の tr:hover で解決しますが、表の中に rowspan を使うとうまくいきません。下の表があったとします。現在のままだと、 ●A3セルをマウスオーバーすると、B3-2・C3-2セルの背景色が変わらない。 ●B3-2セルをマウスオーバーすると、3・A3・D3セルの背景色が変わらない。やりたいのは、3 の行全ての背景色を変えたいのです。 ┏━┳━┳━━┳━━┳━┓ ┃行┃Ａ┃ Ｂ ┃ Ｃ ┃Ｄ┃ ┣━╋━╋━━╋━━╋━┫ ┃１┃A1┃ B1 ┃ C1 ┃D1┃ ┣━╋━╋━━╋━━╋━┫ ┃２┃A2┃ B2 ┃ C2 ┃D2┃ ┣━╋━╋━━╋━━╋━┫ ┃ ┃ ┃B3-1┃C3-1┃ ┃ ┃３┃A3┣━━╋━━┫D3┃ ┃ ┃ ┃B3-2┃C3-2┃ ┃ ┣━╋━╋━━╋━━╋━┫ ┃４┃A4┃ B4 ┃ C4 ┃D4┃ ┗━┻━┻━━┻━━┻━┛ 過去に同じような質問があったので試してみましたが、IE以外では動きませんでした。 ↓ http://okwave.jp/qa/q4793130.html CSSのみでやりたかったのですが、JavaScriptを使わないとダメでしょうか？色の変更は、できれば CSS で行いたいのです。質問がわかりづらくてすみません。よろしくお願い致します。以下サンプルです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>テスト</title> <style type="text/css">  </style> </head> <body> <table border="1" cellspacing="0" class="test-01"> <thead> <tr> <th>行</th> <th width="50">A</th> <th width="180">B</th> <th width="60">C</th> <th width="60">D</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> </tr> <tr> <td>2</td> <td>A2</td> <td>B2</td> <td>C2</td> <td>D2</td> </tr> <tr> <td rowspan="2">3</td> <td rowspan="2">A3</td> <td>B3-1</td> <td>C3-1</td> <td rowspan="2">D3</td> </tr> <tr> <td>C3-2</td> <td>D3-2</td> </tr> <tr> <td>4</td> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> </tr> </tbody> </table> </body> </html>
- ベストアンサー
- HTML
テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け：</th> <td width=284> <input type="text"><input type="button"> </td> <td> - </td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署：</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所：</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td> 　 </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>
- 締切済み
- HTML

tableのバックグラウンドカラーに関する疑問

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