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
マウスがオーバーすると、その行がハイライトされます。
みなさんもきれいな表を作ってみてくださいね。
|
|
|
この記事に関連する記事
![Web creators (ウェブクリエイターズ) 2008年 10月号 [雑誌]](http://ecx.images-amazon.com/images/I/51VGsA-4aJL._SL75_.jpg)
![Web Designing (ウェブデザイニング) 2008年 09月号 [雑誌]](http://ecx.images-amazon.com/images/I/518kQgLKnxL._SL75_.jpg)
![Web creators (ウェブクリエイターズ) 2008年 09月号 [雑誌]](http://ecx.images-amazon.com/images/I/517QVsIHXtL._SL75_.jpg)
