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

解決済みの質問

CSSのテーブルで色分けをする場合

こんばんわ。
HTMLでテーブルタグを使用していたのですが、行数が多くカスタマイズするのが辛くなってきました。
そこで外部から読み込むタイプのCSSを作り始めました。

本題ですが、1つの表を作っています。
1行目と2行目では背景色やフォントなどを変更したいと思っています。
テーブルの背景色は#dadbefです。

table.movie {width: 550; background-color: #dadbef;
}
までは作ったんですが

table.movie td {background-color: #888888;
}

これではうまくいかないですよね。。
TDをクラスごとに設定する、というのを思いついたんですが、ここで頭がパンクしてしまいました。。
それともCSSで表の列を色分けするのはやめたほうがいいでしょうか

投稿日時 - 2005-02-23 01:07:43

QNo.1233020

困ってます

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

行単位で装飾したいのならばtdではなく、trにclassを指定してはどうでしょう。

HTML
<tr class="xxx"><td>aaa</td><td>bbb</td>・・・
<tr class="yyy"><td>AAA</td><td>BBB</td>・・・
CSS
tr.xxx td {background-color:#888;}
↑class='xxx'の tr の配下にある td というセレクタになります。



なお、テーブルはいくつかのブロックに分けられます。
色を変えたいというならば意味があるのでしょうから、ブロックを変える
→thead、tbodyを使い分ける、tbodyでも別のブロックにする
セルの種類を変える
→td、thを使い分ける
等、そうした区別を検討してもいいのかも。


<table>
<thead>
<tr><th>出席番号</th><th>名前</th></tr>
</thead>
<tbody class="male">
<tr><th>1</th><td>木村太郎</td></tr>
</tbody>
<tbody class="female">
<tr><th>2</th><td>山田花子</td></tr>
</tbody>
</table>

各ブロックのセルの背景色を変えるには
thead th{backgrond-color:xxx;}
tbody.male th,tbody.male td{backgrond-color:xxx;}
tbody.female th,tbody.female td{backgrond-color:xxx;}

投稿日時 - 2005-02-23 10:54:47

お礼

こんばんわ。
tr単位で行えばよかったんですね!見事うまくいきました!ありがとうございます。

あと<th>などは初めてききましたので早速ググりました。これからはこのタグも活用したいと思います。
本当にありがとうございました。

投稿日時 - 2005-02-24 01:18:51

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

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

回答(2)

ANo.1

こんばんは。

table.movie tdではなく、例えば簡単に数字の1,2,3(じゃなくてもわかりやすいもの)を使えば出来るのでは?
.1{background-color: #888888;}
にして使いたい<td>で<td class="1">にすれば出来るかと…。
<注意>
<td class="1">の1の前には.(ドット)はいりません。

回答違いだったらごめんなさい。

投稿日時 - 2005-02-23 02:16:41

お礼

回答ありがとうございます。
ちょっと私の求めていた回答ではなかったのですが、
短くタイトルをしておかないとややこしくなりますね、確かに。。

投稿日時 - 2005-02-24 01:16:58

あなたにオススメの質問