1ページの中に表が2つあるときに別々の見栄えを設定するのは、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; }