[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル

サイト構築 -CSS

Post on:2011年10月18日

デモ

デモでは、セルがホバーでハイライトするテーブル、セルを交互にカラーリングしたテーブルの2種類があります。

デモページ:Highlighted rows, borders
角丸、セルがホバーでハイライト

デモページ:Zebra stripes, footer
角丸、セルを交互にカラーリング

実装のポイント

CSS3を使って美しく、そして機能するテーブルを実装するポイントです。

画像を使用しないで、角丸を実装。
余分なid, classは使用せず、更新が容易。
※tableにclassを一つだけ
ユーザフレンドリーで、読むことが簡単。

実装

HTML

HTMLは非常にシンプルです。
classは、tableタグにのみ使用します。

<table class="bordered">
	<thead>
	<tr>
		<th>#</th>
		<th>IMDB Top 10 Movies</th>
		<th>Year</th>
	</tr>
	</thead>
	<tr>
		<td>1</td>
		<td>The Shawshank Redemption</td>
		<td>1994</td>
	</tr>
	<tr>
</table>

※デモの一つ目と二つ目は、tableタグのclass名が異なるだけです。

[ad#ad-2]

テーブルの四隅を角丸に

角丸のスタイルシートの前に、隣接するセルのボーダーをborder-collapseで設定します。

table {
	*border-collapse: collapse; /* IE7 and lower */
	border-spacing: 0;
}

※「*」を使用してIE7以下用に設定します。

border-collapseを0に設定したら、角丸を設定します。

th:first-child {
	-moz-border-radius: 6px 0 0 0;
	-webkit-border-radius: 6px 0 0 0;
	border-radius: 6px 0 0 0;
}

th:last-child {
	-moz-border-radius: 0 6px 0 0;
	-webkit-border-radius: 0 6px 0 0;
	border-radius: 0 6px 0 0;
}

テーブルのセルをホバーでハイライト

テーブルのセルをホバー時にアニメーションでハイライト表示します。

.bordered tr:hover
{
	background: #fbf8e9;
	-o-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

CSS3非対応ブラウザや「:hover」にバグのあるIE6用には、jQueryを使用します。

$('.bordered tr').mouseover(function(){
    $(this).addClass('highlight');
}).mouseout(function(){
    $(this).removeClass('highlight');
});

ホバー時に「highlight」というclassを付与します。
「.highlight」は下記のように設定します。

.highlight
{
  background: #fbf8e9;
  -o-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

※CSS3非対応ブラウザは背景色が変わるだけで、アニメーションは適用されません。

テーブルのセルを交互にカラーリング

テーブルのセルを半透明のゼブラ柄にします。

.zebra tbody tr:nth-child(even) {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

:nth-child(n)非対応ブラウザにはjQueryで実装します。

$(".zebra tr:even").addClass('alternate');

セルに交互に「alternate」というclassを付与します。
「.alternate」は下記のように設定します。

.alternate {
    background: #f5f5f5;
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

※CSS3非対応ブラウザは背景色が変わるだけで、ボックスシャドウは適用されません。