CSSで表を見やすく装飾する方法

HTMLで表を書いたものの、そのままだと何となく味気ない、と思うこともありますよね。

表はCSSで簡単に装飾する事ができます。

ここでは、HTMLで書いた表をCSSで装飾する、基本的な書き方をまとめています。

表に罫線をつける

「table」「td」「th」に「border」を指定すると罫線のついた表になります。

デフォルトだとセルごとに線と余白がついて、二重線のような状態になりますが、「border-collapse: collapse;」を指定するとラインを1つに統一する事ができます。

table, td, th{
  border: 2px #aaa solid;
}
table{
  border-collapse: collapse;
}

マスの余白を調整する

マス（セル）に余白を持たせたい時は「td」「th」に「padding」をつけます。

td,th{
  padding: 10px;
}

マス内でセンタリングさせる

マス内のテキストをセンタリングしたい時は「td」「th」に「text-align: center」を指定します。

td,th{
  text-align: center;
}

マス全体に色をつける

「table」に背景色を指定すると、表全体に色をつけることが出来ます。

table{
  background: #ccc;
}

一部のマスに色をつける

見出しにだけ色をつけたい場合は「th」に背景色を指定します。

見出し以外のマスだけに色をつける時は「td」に背景色を指定します。

table th{
  background: #ccc;
}

1行ごとに色をつける

表の1行おきに色をつけたい時は「tr:nth-child()」を使います。

「()」内には、偶数行なら「even」、奇数行なら「odd」と指定します。

私はクセでついやってしまうのですが「tr:nth-child()」の「:」の前後に、半角スペースを入れないように気をつけましょう。

偶数行に色をつけるサンプルはこちら。

/*偶数行を指定する*/
table tr:nth-child(even) {
  background: #eee;
}

/*奇数行を指定する*/
table tr:nth-child(odd) {
  background: #eee;
}

「th」「td」別に1列ごとに色をつける

「th」の奇数/偶数行だけ、「td」の奇数/偶数行だけを指定して色をつける事もできます。

ここでは、「td」の奇数行を指定しています。

/*奇数行を指定する*/
table tr:nth-child(odd) td{
  background: #eee;
}

1列ごとに色をつける

ある1列に色をつけたいときは「td:nth-of-type()」を使います。「()」内に、指定したい列番号を入れます。

ここでも「td:nth-of-type()」の「:」の前後に、半角スペースを入れないように気をつけましょう。

1列目に色をつける場合は、「td:nth-of-type(1)」を指定します。

table td:nth-of-type(1){
  background: #eee;
}

特定の見出しにだけ色をつける

「td:nth-of-type()」の「td」を「th」に変えると、特定の見出しだけ色を変えることが出来ます。

「th:nth-of-type()」の「()」内に、色を付けたい見出しの列番号を指定します。

1列目の見出しに色をつけたい時は、「th:nth-of-type(1)」と指定します。

table th:nth-of-type(1){
  background: #eee;
}

tableのデフォルトの余白・隙間を消す

table要素にデフォルトでついている 余白や隙間を消したい時の指定方法です。

表を装飾していて余計な余白を消したくなった時に、覚えておくと役立ちます。

table{
  border-collapse: collapse;
  border-spacing: 0;
}

border-collapse

となり同士のセルのボーダー（枠線）を「重ねて表示する」か「間隔を開けて表示するか」を指定します。

デフォルトでは「separate」（間隔を開ける）になっているので、余白を消したい時は「collapse」（重ねて表示）へ変更します。

border-spacing

となり同士のセルのボーダーとボーダーの間隔を「px」「em」などの単位で指定できます。

余白を消したい時は「0」を指定します。ちなみにマイナスの値は指定できません。

「border-collapse: separate;」（間隔を開ける）の時に有効になる設定で、「collapse」（重ねて表示）の場合は特に効果はありません。

おまけ

サンプルでは分かりやすくするために直接「table」に装飾指定をしていますが、実際に「table」などの要素を装飾する時には「class」を活用しましょう。

「table」要素を「div要素」で囲み、その「div要素」に「class」をつけて装飾するようにします。

こうする事で、違うデザインの表を作る時や、外部コードを埋め込んだ時などに、思わぬ表示になるのを防ぐ事ができます。

<div class="sample">
<table>
<tr><th></th><th></th><th></th></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</div>

.sample table{
  background: #eee;
}