複数の表に別々の見栄え

class を使うのだが…

１ページの中に表が２つあるときに別々の見栄えを設定するのは、classを使えばいいと考えることができます。しかし、tableタグに classを指定するのはまだいいのですが、td タグに指定するのは煩わしいでしょう。

例えば次のようになります。(もちろんtableとtdのクラス名は別々でもかまいませんが)

<table class="doubutsu1">
<tr>
<td class="doubutsu1">動物</td>
<td class="doubutsu1">鳴き声</td>
<td class="doubutsu1">好物</td>
</tr>
<tr>
<td class="doubutsu1">いぬ</td>
<td class="doubutsu1">わんわん</td>
.................................

これを不要にする仕組みがCSSにはあります。

<table class="doubutsu1">
<tr>
<td>動物</td>
<td>鳴き声</td>
<td>好物</td>
</tr>
<tr>
<td>いぬ</td>
<td>わんわん</td>
.................................
<table class="doubutsu2">
<tr>
<td>動物</td>
<td>鳴き声</td>
<td>好物</td>
</tr>
<tr>
<td>ぞう</td>
<td>ぱおーん</td>
.................................

これで、doubutsu1 の中の td と doubutsu2 の中の td という考え方で区別をするのです。cssには次のように書きます。

td {
    border:solid 1px #999999;
}

table.doubutsu1 td{
    background-color:#ccffcc;
}
table.doubutsu2 td{
    background-color:#ccccff;
}

class="doubutsu1" の表は、

class="doubutsu2" の表は、

仕組み

table.doubutsu1は、classがdoubutsu1であるtable ということです。それにスペースを入れてその後に td を書くことで、doubutsu1 の中の td という意味になります。

ただの tdに書いたものは、共通の設定になります。ただの td に書いたものと共通の項目を table.doubutsu1 tdにも書くとtable.doubutsu1 tdの方が優先されます。

たとえば、次の場合はボーダーはtable.doubutsu1 tdだけは灰色でなく赤になります。

td {
    border:solid 1px #999999;
}
table.doubutsu1 td{
    border:solid 1px #ff0000;
}