グラデーションや角丸を使ったグラフィカルなテーブル
次に、図08のようなグラデーションや角丸を使ったグラフィカルなテーブルを、CSSでスタイリングしてみましょう。HTMLは先ほどと同じものを使います。
グラデーションを付け、角丸にする
キャプションやテーブルはCSS3のborder-radiusプロパティで角丸にしていますが、テーブルでborder-radiusプロパティを使う際は、border-collapseプロパティの値がseparateである必要があります。値がcollapseのときは、border-radiusが効かないので注意しましょう。
しかしseparateを指定すると、セルとセルのボーダー間に隙間ができてしまいます。このサンプルでは、ボーダーを使ってセルを立体的に表現していますが、ボーダーの間隔があいていると立体感を表現できないので、「border-spacing:0;」を指定します。
テーブルの背景は、CSS3のlinear-gradient()関数を使って、白（#fff）からグレー（#ccc）のグラデーションを指定しています。
linear-gradient()関数の書式は、「linear-gradient(グラデーションの向き, 色指定, 色指定, [,色指定...])」となっていますが、ブラウザの先行実装があり、これまでにも書き方が何度か変更になっています。現在もまだ確定ではないのでご注意ください。グラデーションの向きは、角度や開始位置、開始角度などが指定でき、色指定は任意の数指定可能ですが、最低限、開始色と終了色は指定する必要があります。サンプルでは、最も単純な線形グラデーションの指定を使って、開始色と終了色のみ指定しています。
同様に、見出しにも薄グレー（#ccc）から濃グレー（#666）のグラデーションを指定していますが、濃グレーになる位置を20%で指定しすることで、立体感が出るようにしています。デフォルトではグラデーションは均等に行われますが、色指定の後に長さを指定すると、開始位置からの距離がその長さの地点で、ちょうどその色になるようにグラデーションが調整されます。
table{
border-collapse: separate; /* 角丸を使うときはseparate */
border-spacing: 0; /* ボーダーとボーダーの間隔は0 */
background-color: #eee; /* 背景色を指定 */
background-image: linear-gradient(#fff, #ccc); /* 白からグレーのグラデーション */
border:1px solid #666;
border-radius: 10px; /* 角丸 */
}
caption {
border:1px solid #eee;
border-radius: 10px; /* 角丸 */
background-color: #eee;
font-size: 80%;
margin-bottom: 10px;
padding: 5px;
}
th {
background-color: #666;
color: #fff;
font-size: 80%;
background-image: linear-gradient(#ccc, #666 20%); /*薄グレーから濃グレーのグラデーション */
padding: 6px 0 4px 0;
font-weight: normal;
width: 100px;
}
ボーダーでセルに立体感を出す
各セルの左ボーダーと上ボーダーは背景より明るい色、右ボーダーと下ボーダーには背景より暗い色を指定することで、立体感を出しています。
これは、「border-collapse:separete;」でボーダーが重ならないことを活用したスタイリングです。
td {
padding: 4px 10px;
text-align: center;
border-top: 1px solid #fff; /* 上ボーダー明るく */
border-right: 1px solid #bbb; /* 右ボーダー暗く */
border-bottom: 1px solid #bbb; /* 下ボーダー暗く */
border-left: 1px solid #fff; /* 左ボーダー明るく */
}
角丸を仕上げる
セルに背景色やボーダーを指定しましたが、このままでは図10のように、四隅に角が表示されてしまいます。
そこで、四隅のセルに対しても角丸を指定しましょう。ここでは、セレクタにE:first-childとE:last-childを使っています。それぞれ、子として最初のE要素、子として最後のE要素にスタイルを適用する際に使用します。例えば、左上の角は最初の列の最初のthなので、セレクタは「tr:first-child th:first-child」です。
tr:first-child th:first-child { /* 最初のtrが親の最初のth */
border-radius: 10px 0 0 0; /* 左上半径10px */
}
tr:first-child th:last-child { /* 最初のtrが親の最後のth */
border-radius: 0 10px 0 0; /* 右上半径10px */
}
tr:last-child td:first-child { /* 最後のtrが親の最初のtd */
border-radius: 0 0 0 10px; /* 左下半径10px */
}
tr:last-child td:last-child { /* 最後のtrが親の最後のtd */
border-radius: 0 0 10px 0; /* 右下半径10px */
}
まとめ
本記事では、テーブルをスタイリングする際に覚えておくと良いポイントを紹介しました。border-collapseプロパティの値がcollapseの場合とsepareteの場合で、スタイリングの方法が変わってくることがお分かりいただけたと思います。
次回も、引き続きテーブルのスタイリングを紹介します。今回は紹介できなかったcolgroupや、col要素を使った縦列のスタイリング、jQueryを使ったサンプルを紹介したいと思います。
