デザインサンプルで学ぶCSSによるスタイリング～「テーブル（セルのボーダーの表示形式によるスタイリング）」編

CSSで作るWeb用パーツ（3）

ボーダー幅1pxのシンプルなゼブラテーブル

　前の段落を踏まえたうえで、図06のような、セルに1px幅のボーダーを引いたシンプルなテーブルを作ってみましょう。

図06：ボーダー幅1pxのシンプルなテーブル（sample01.html）

テーブルのマークアップ

　HTMLソースに大きな特徴はありません。caption要素でキャプションをつけ、thead要素で表ヘッダ、tbody要素で表本体をマークアップしています。

［リスト06］サンプル01／HTML（sample01.html）

<table>
  <caption>ジャケットのサイズ表</caption>
  <thead>
    <tr>
      <th>サイズ</th><th>バスト</th><th>肩幅</th><th>袖丈</th><th>着丈</th>
    </tr> 
  </thead>
  <tbody>
    <tr>
      <td>7AR</td><td>89cm</td><td>37.5cm</td><td>57.5cm</td><td>62cm</td>
    </tr>
～中略～
  </tbody>
</table>

border-collapseプロパティの値に「collapse」を指定

　テーブルセルの表示形式をデフォルトのseparateのまま、tdのボーダー幅を1pxにして、このスタイリングをしようとすると、隣り合うボーダーの幅が足されてしまうため、2pxになってしまいます。

図07：「border-collapse:separete;」の時（sample01a.html）

　そのため、例えば『上と右のボーダー幅を1pxとしたときは、下と左ボーダーの幅を0にする』といった具合に、隣り合うボーダーの一方のボーダー幅を0にする必要があり、やや冗長的なコードになってしまいます。

　サンプルのように、テーブルセルに1px幅のボーダーを引きたい場合は、まずborder-collapseプロパティの値に「collapse」を指定しましょう。これで隣合うボーダーを意識せず、簡単にスタイリングすることができます。

［リスト07］サンプル01／CSS（sample01.html）

table{
  border-collapse: collapse; /* ボーダーを重ねて表示 */
}
table, th, td {
  border: 1px solid #ccc;
}

見出しセルはデーターセルと表現を変える

　見出しセルは、データセルと見た目を変えてあげる方が親切です。サンプルのようにセルに背景色を付ける場合は、文字色とのコントラストを十分につけて、視認性を確保できるようにしましょう。

［リスト08］サンプル01／CSS（sample01.html）

th {
  background-color: #666;
  color: #fff;
}

1行ごとに背景色を変える

　1行ごとに背景色を変えたゼブラテーブルは、CSS3のセレクタ「E:nth-child(n)」を使えば簡単に実装できます。疑似クラスの一種で、n番目の子となるE要素にスタイルを適用します。nには、整数、奇数を表すodd、偶数を表すeven、数式を指定できます。数式で奇数を指定する場合には2n+1、数式で偶数を指定する場合には2n+0です。nは固定で0以上の整数をあらわし、「2n+1」の場合は、2×0+1=1番目、2×1+1=3番目、2×2+1=5番目、という具合になります。

　サンプルでは、偶数行に薄いグレーの背景色を付けました。

［リスト09］サンプル01／CSS（sample01.html）

tbody tr:nth-child(even){ /* 偶数行 */
  background-color: #eee;
}