サイト全体のコーディングとしては、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

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

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