TableとCSSいろいろ

サイト全体のコーディングとしては、Tableを使わず、DivタグとCSSを使って構成していくパターンが主流だと思いますが。。。

例えば、コンテンツ内に商品のスペック表や、料金表などを表示する場合、その名の通り”Table”タグを使う方が効率的ですね。

っちゅうわけで、本日はTableとCSSを使って表を作る方法をいろいろまとめてみました。

1. 16 Sortable Table Techniques | CSS Juice

こちらの記事では、Table、CSS、Javascriptを使って16種類のソート可能な表の作り方をまとめられております。ソート機能は、あると結構うれしい機能ですね。デザイン的にもきれいなものが多いです。


16 Sortable Table Techniques

2. CSS-Based Tables: Modern Solutions | Smashing Magazine

こちらは、少し前の記事ですがCSSベースのTableデザインをまとめられております。きれいなものが多く参考になります。


CSS-Based Tables: Modern Solutions | Smashing Magazine

3. Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

CrazyEggの料金表のように、強調したいカラムを浮き出させる方法を紹介されています。いろいろ使えそうなアイデアですね。


Creating a table with dynamically highlighted columns like Crazy Egg's pricing table

4. Pure CSS Scrollable Table with Fixed Header

こちらは、表のヘッダー部分は固定され、データ部分のみスクロールさせるデモページです。データが多いけど、あまりダラダラ長く表示させたくない場合に使えそう。


Pure CSS Scrollable Table with Fixed Header

5. A CSS styled table version 2 | Veerle’s blog

シンプルなゼブラテーブルならこちら。


A CSS styled table version 2 | Veerle's blog

6. Data Tables and Cascading Style Sheets Gallery

マウスがオーバーすると、その行がハイライトされます。


Data Tables and Cascading Style Sheets Gallery

みなさんもきれいな表を作ってみてくださいね。

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ