table、行に一気にスタイルをきかせる方法

※この記事は13年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

暑くなってきましたね。
どうも、一ヶ月間でアイスに一万かけるみやびです。

ハライタイゼ

さて、今日は、廃れてると思ってはいけない、テーブルのテクニックを一つ。

テーブルでレイアウトする場面はもうないといいつつも、テーブルタグを使う機会は何かと多いものです。
例えば、会社概要とかね。

上の、"項目名"と"内容"が入ってるセルには背景色を入れたいとかね。
しかし、それぞれのth要素とtd要素一個一個にclassを指定するのは非常にめんどうだし、時間がかかること・・・・。
そんな時は、TR要素自体にスタイルをきかせればいいじゃんと思う人がいるだろう。
かくゆう私も最初やってみたんだ。
しかし、"IEだとTR要素にはスタイルがきかない！"のである。
残念・・・・・・

と思うなかれ！

そのTR要素にスタイルをきかせるという考え方がヒントで以下の方法あるのだ。

●HTMLソース

<table width="100%" cellpadding="0" cellspacing="0" border="0" summary="テーブルタグ説明" class="ex-table02">
<tr class="cell-head">
<th scope="col">項目名</th>
<th scope="col">内容</th>
</tr>
<tr>
<th width="100" scope="row">社名</th>
<td>みやびプリンと仲間達</td>
</tr>
<tr>
<th scope="row">住所</th>
<td>みやびの国</td>
</tr>
<tr>
<th scope="row">代表取締役</th>
<td>みやびプリン</td>
</tr>
<tr>
<th scope="row">設立</th>
<td>ん億年前</td>
</tr>
<tr>
<th scope="row">事業内容</th>
<td>みやびプリンの製造及び販売<br>
みやびを護るの会の運営</td>
</tr>
</table>

●CSSソース

.ex-table02 tr.cell-head th {
background-color: #000066;
color: #FFFFFF;
}

↓実際の表示↓

こうしておけば、classに"cell-head"が指定されたTR要素の中に入っているTH要素にスタイルを適用させることができる。もちろん、セレクタを追加すれば、TDだってオーケーさ。

これで、テーブルタグのめんどくささも軽減される（ハズ）
ほらほらそこのあなたも試してみんしゃいよ。

<table width="100%" cellpadding="0" cellspacing="0" border="0" summary="テーブルタグ説明" class="ex-table02">
<tr class="cell-head">
<th scope="col">項目名</th>
<th scope="col">内容</th>
</tr>
<tr>
<th width="100" scope="row">社名</th>
<td>みやびプリンと仲間達</td>
</tr>
<tr>
<th scope="row">住所</th>
<td>みやびの国</td>
</tr>
<tr>
<th scope="row">代表取締役</th>
<td>みやびプリン</td>
</tr>
<tr>
<th scope="row">設立</th>
<td>ん億年前</td>
</tr>
<tr>
<th scope="row">事業内容</th>
<td>みやびプリンの製造及び販売<br>
みやびを護るの会の運営</td>
</tr>
</table>

.ex-table02 tr.cell-head th {
background-color: #000066;
color: #FFFFFF;
}