TableとCSSいろいろ
サイト全体のコーディングとしては、Tableを使わず、DivタグとCSSを使って構成していくパターンが主流だと思いますが。。。
例えば、コンテンツ内に商品のスペック表や、料金表などを表示する場合、その名の通り”Table”タグを使う方が効率的ですね。
っちゅうわけで、本日はTableとCSSを使って表を作る方法をいろいろまとめてみました。
1. 16 Sortable Table Techniques | CSS Juice
こちらの記事では、Table、CSS、Javascriptを使って16種類のソート可能な表の作り方をまとめられております。ソート機能は、あると結構うれしい機能ですね。デザイン的にもきれいなものが多いです。
2. CSS-Based Tables: Modern Solutions | Smashing Magazine
こちらは、少し前の記事ですがCSSベースのTableデザインをまとめられております。きれいなものが多く参考になります。
3. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table
CrazyEggの料金表のように、強調したいカラムを浮き出させる方法を紹介されています。いろいろ使えそうなアイデアですね。
4. Pure CSS Scrollable Table with Fixed Header
こちらは、表のヘッダー部分は固定され、データ部分のみスクロールさせるデモページです。データが多いけど、あまりダラダラ長く表示させたくない場合に使えそう。
5. A CSS styled table version 2 | Veerle’s blog
シンプルなゼブラテーブルならこちら。
6. Data Tables and Cascading Style Sheets Gallery
マウスがオーバーすると、その行がハイライトされます。
みなさんもきれいな表を作ってみてくださいね。
|
|
|
