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

この投稿は最終更新から12年以上経過しているため、内容が古くなっている可能性があります。

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

classの場合

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

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

HTML

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

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

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

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

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

CSS

table.aaa { CSSの内容 }
table.bbb { CSSの内容 }

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

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

※ 下の例では見やすいように線を付けるため td も追加しています。

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

CSS

/* 基準となるテーブル */
table { widh: 400px; height: 150px; border-collapse:collapse;} 
td { border: 1px solid #fff;}

/* aaaのテーブル。横幅200px（縦幅150pxはそのまま）で上書きされる */
table.aaa { width: 200px;}
/* bbbのテーブル。横幅400px、縦幅150pxのままで背景だけが黒色になる */
table.bbb { background-color: #000; color: #fff;}

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

基準となるテーブル

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

aaaのテーブル

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

bbbのテーブル

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

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

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

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

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

そんな時は

HTML

<div id="ccc">

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

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

</div>

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

CSS

/* 基準となるcccテーブル。横600縦100 */
#ccc table { widh: 600px; height: 100px; border-collapse:collapse;}
/* 1pxの赤色ドット線 */
#ccc td { border: 1px dotted #ff0000;}

/* dddのテーブル。横幅だけ300pxを指定 */
#ccc table.ddd { width: 300px;}
/* eeeのテーブル。背景色を上書き */
#ccc table.eee { background-color: #ff7f50;}

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

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

#ccc の基準となるテーブル

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

#ccc の中のdddテーブル

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

#ccc の中のeeeテーブル

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

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

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

HTML

<table>
<tr><td>例:table</td><td>例:table</td></tr>
<tr><td>例:table</td><td>例:table</td></tr>
</table>

CSS

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

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

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

HTML

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

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

HTML

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

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

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

HTML

<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”」を指定しています。

CSS

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

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名が同じ場合でも上書きが可能です。

HTML

<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”」ですが、親要素から指定することにより違うデザインにできます。

CSS

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

以上です。