複数のtableのデザインをCSSで指定する

1つのサイトや投稿で複数のテーブルデザインを使いたい場合、divやclassをCSSで個別に指定します。

classの場合

基本的にはclassでほとんど対応します。

仮に「aaa」と「bbb」の2つのテーブルがあり、デザインをそれぞれ指定したい場合
それぞれの「table」に「class」を指定しておきます。

<table class="aaa">
~略~
</table>

<table class="bbb">
~略~
</table>

それぞれの「table」に「class=aaa」と「class=bbb」を指定しました。

そして CSS にそれぞれのスタイルを指定します。

その際、各class の前に table を付けてこのように指定します。

table.aaa { CSSの内容 }

table.bbb { CSSの内容 }

これで個別にスタイルを指定できますが、このままでは各テーブルの幅や色や線の太さなど細かな部分までいちいち全て指定しなくてはいけません。

ある程度のデザインが決まっていて、各テーブルでは一部だけ変更したいというような時は大元の基準となる「table」のスタイルを先に指定しておくと「aaa」と「bbb」は変えたい部分だけを変更することができます。

(下の例では線を付けるために td も追加しています。)

CSSは上から順に読み込まれ、下にあるものが優先で上書きされます。
ですので、基準となる「table」は「aaa」や「bbb」よりも上に書きましょう。

table { widh: 400px; height: 150px; border-collapse:collapse;} //横縦の基準
td { border: 1px solid #fff;}

table.aaa { width: 200px;} //横幅200px、縦幅150pxになる

table.bbb { background-color: #000;} //横幅400px、縦幅150pxで背景が黒色になる

基準となるテーブルの横幅を400px、縦幅を150pxとしてみました。
そこから「aaa」は横幅を200pxに変更、「bbb」は背景色を黒色に変更するように指定しています。
変更というよりは上書きが正しい表現だと思います。

例:table例:table
例:table例:table

例:aaa例:aaa
例:aaa例:aaa

例:bbb例:bbb
例:bbb例:bbb

基準に対して必要な部分だけ変更を加えることでCSSの内容を減らすことができます。
しかし、無計画に基準を作ってしまうとデメリットもあります。

テーブルが指定した覚えの無いデザインになる場合は、すでに基準となる table のスタイルが親要素などに存在しています。WordPressで使用しているテーマにはじめから table のスタイルが指定されている場合などがこれです。

親テーマのCSSを調べて小テーマで上書きしてしまうのも手ですが、それを行うと従来のデザインが崩れてしまう可能性もあります。

その場合、 table デザインを個別に指定するには1つ1つのテーブルの要素を全て指定することになりとても面倒です。そんな時は

<div id="ccc">

<table class="ddd">
~略~
</table>

<table class="eee">
~略~
</table>

</div>

上のように「div要素 ccc 」で2つのテーブル、あるいは記事の内容全てを囲んでしまって

#ccc table { widh: 200px; height: 100px; border-collapse:collapse;} //横200縦100
#ccc td { border: 1px dotted #ff0000;} //1pxの赤色ドット線

#ccc table.ddd { width: 100px;} //縦だけ100pxを指定

#ccc table.eee { background-color: #ff7f50;} //背景色を上書き

と頭に「div要素 ccc 」を付けることで、「div要素 ccc 」内の基準となるテーブルを作ることができ、そのあとで個別に上書きができます。

下の例は、この記事の冒頭で作った横幅400px、縦幅150pxという table の基準を無視して「div要素 ccc 内の table 」を基準にしたものです。

例:table例:table
例:table例:table

例:ddd例:ddd
例:ddd例:ddd

例:eee例:eee
例:eee例:eee

td などを個別に装飾する場合

一度基本の形に戻ります。

<table>
<tr><td>例:table</td><td>例:table</td></tr>
<tr><td>例:table</td><td>例:table</td></tr>
</table>
table { widh: 400px; height: 150px; border-collapse:collapse;}
td { border: 1px solid #fff;}
例:table例:table
例:table例:table

はじめに作った横400px、縦150pxのテーブルです。
ここからテーブルの右下だけ色を変えるには、右下の td に class を新しく付けます。

<table>
<tr><td>例:table</td><td>例:table</td></tr>
<tr><td>例:table</td><td class="fff">例:table</td></tr>
</table>

右下の td に「class=”fff”」を指定しました。
CSS にはこのように付け加えます。

td.fff { background-color: #333;}

例:table例:table
例:table例:table

さらに2つのテーブルを使って、横幅とそれぞれの右下の色を変えます。

<table>
<tr><td>例:table</td><td>例:table</td></tr>
<tr><td>例:table</td><td class="fff">例:table</td></tr>
</table>
<table class="ggg">
<tr><td>例:table</td><td>例:table</td></tr>
<tr><td>例:table</td><td class="hhh">例:table</td></tr>
</table>

2つのテーブルの右下の td にそれぞれ「class=”fff」と「class=”hhh”」を指定しました。
さらに、2つ目の table には「clasa=”ggg”」を指定しています。

table { widh: 400px; height: 150px; border-collapse:collapse;}
td { border: 1px solid #fff;}
td.fff { background-color: #333;}

table.ggg { width: 200px;}
table.ggg td.hhh { background-color: #90ee90;}
例:table例:table
例:table例:table

例:table例:table
例:table例:table

このケースでは、CSSの最後にある「hhh」は親となる「table.ggg」を頭に付けなくても実は適用されます。

table.ggg td.hhh {} → td.hhh {}  これでも適用される

念のため、他の要素が絡んできて上手くスタイルが適用されない時などに「親要素から指定する」書き方を覚えておくと役に立つと思います。

同じclass名でもデザインを変える

親から指定する書き方を使うと、たとえclass名が同じ場合でも上書きが可能です。

<table>
<tr><td>例:table</td><td>例:table</td></tr>
<tr><td>例:table</td><td class="zzz">例:table</td></tr>
</table>
<table class="ggg">
<tr><td>例:table</td><td>例:table</td></tr>
<tr><td>例:table</td><td class="zzz">例:table</td></tr>
</table>

2つのテーブルの右下はどちらも「class=”zzz”」ですが、親要素から指定することにより違うデザインにできます。

table { widh: 400px; height: 150px; border-collapse:collapse;}
td { border: 1px solid #fff;}
td.zzz { background-color: #008000;}

table.ggg { width: 200px;}
table.ggg td.zzz { background-color: #00ced1;}
例:table例:table
例:table例:table

例:table例:table
例:table例:table

以上です。


コメント

 DISQUSコメントシステムとは?
DISQUSコメントシステムFacebook Twitter Google などのアカウントを使用してコメントを残すことができます。
また、それらを使いたくない場合でも メールアドレスのみ でコメントが可能で、その際のアドレスはもちろん非公開です。
YouTubeTweet などはURLを貼ると自動で埋め込み表示されますし、画像をアップすることもできます。
お気軽にコメント頂けると嬉しいです。

New Post



Random


CLOSE