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

質問

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

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

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

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

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

回答No.2

steel_gray · ベストアンサー

行単位で装飾したいのならば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;}

お礼

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

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

回答No.1

gaviru44

こんばんは。

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

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

お礼

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