PR

CSS3で視認性の高いテーブルを作る

2011年8月4日(木)
宮本 麻矢(著)山田 祥寛(監修)

:nth-child()で作るゼブラデータテーブル

基本を押さえたところで、早速:nth-child()擬似クラスを使用して、図6のような、1行ごとに背景色を変えたゼブラテーブルを作成してみましょう。

図6:ゼブラテーブル

CSS2.0でこれを実現しようとすると、1行ごとのtr要素に、class="even"あるいはclass="odd"というような記述を付け足してあげる必要がありました。CSS3であれば、tr:nth-child(even)で偶数行、:nth-child(odd)で奇数行というようにスタイルの適用先を簡単に指定できるため、HTML側にスタイルのためのコードを追記する必要はありません。

[リスト11]ゼブラテーブルのHTMLソース(table.html)

<table>
<caption>CSS3で追加されたセレクタのIE6~8およびjQueryの対応状況</caption>
<thead>
<tr><th>パターン</th><th>概要</th><th>IE6</th><th>IE7</th><th>IE8</th><th>jQuery</th></tr>
</thead>
<tbody>
<tr><td>E[foo^="bar"]</td><td>属性「foo」の値が「bar」と前方一致するE要素</td><td>×</td><td>○</td><td>○</td><td>○</td></tr>
<tr><td>E[foo$="bar"]</td><td>属性「foo」の値が「bar」と後方一致するE要素</td><td>×</td><td>○</td><td>○</td><td>○</td></tr>
<tr><td>E[foo*="bar"]</td><td>属性「foo」の値が「bar」と部分一致するE要素</td><td>×</td><td>○</td><td>○</td><td>○</td></tr>
~中略~
<tr><td>E:last-of-type</td><td>兄弟関係にあるもののうち最後のE要素</td><td>×</td><td>×</td><td>×<<tr><td>E ~ F</td><td>E要素の後に出現するF要素</td><td>×</td><td>○</td><td>○</td><td>○</td></tr></tbody>
</table>

CSSも、とてもシンプルで簡単です。例では、tr:nth-child(even)として、偶数行に対して、薄い青色(#f7f7fb)の背景色を適用しています。

[リスト12]CSSソース:偶数行に背景色を指定(table.css)

tr:nth-child(even) {

  background-color: #f7f7fb;

}

未対応のブラウザをjQueryで補完

前項同様、:nth-child()に対応していないブラウザには、jQueryを利用して対応しましょう。table.jsのコードは次のようになります。

[リスト13]未対応ブラウザ用コード(table.js)

$(function(){
  $("tr:nth-child(even)").css("background-color", "#f7f7fb");
});

サンプルでは、さらに見出しの背景をlinear-gradient関数でグラデーションにしています。

[リスト14]CSSソース:見出しにグラデーションを指定(table.css)

th {
  color: #ffffff;
  background: -moz-linear-gradient(top, #0000ff, #0066ff);
  background: -webkit-gradient(linear, left top, left bottom, from(#0000ff),to(#0066ff));
  background: linear-gradient(top, #0000ff, #0066ff);
  border:1px solid #cccccc;
}

linear-gradient関数に未対応のIEには、独自のfilterプロパティを利用します。

[リスト15]IE専用CSSソース:見出しにグラデーションを指定(ie_table.css)

th {
  background: transparent; /* 背景をリセット */
  -ms-filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0000ff',EndColorStr='#0066ff');
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#0000ff',EndColorStr='#0066ff');
}

これで、IEで表示しても、同じような見栄えになります。

図7:ゼブラテーブル
Think IT会員限定特典
  • 「CSS3で視認性の高いテーブルを作る」サンプルプログラム

著者
宮本 麻矢(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています