【決定版】CSSで実装できる綺麗なテーブルデザイン10選まとめ

Webデザインをする時に便利なのが、テーブルデザイン。そのままだと愛想のないテーブルですが、角を丸くしたり、部分的に色を変えたり、線の色を変えたりとデザインを整えると色々な場面で使えるので重宝します。

最近よく使われているのが、価格表や会社概要ページなどですね。凝ったデザインのテーブルもよく見かけるようになって、これがあるとページ全体に華を添えてくれます。そこで今回はデザインの参考になりそうなテーブルデザインを集めてみました。

デザインの参考になるテーブルデザイン10選

シンプルなゼブラ仕様のテーブル

http://icant.co.uk/csstablegallery/tables/39.php

シンプルにデザインされたゼブラ仕様のテーブルです。淡い色合いでグレーベースなので、利用シーンを選ばないのがいいですね。枠線のグレーが淡い色に設定されているのも、主張しすぎないところがGoodです。CSSもとてもシンプルに組まれていて、偶数行と奇数行で背景色を変えている他、挙動としてはマウスオーバー時にリンクの色が反転します。

角が丸くなったシンプルでかわいいテーブル

http://coliss.com/articles/build-websites/operation/css/css3-tables-with-rounded-corners-by-red-team-design.html

背景色は白ベースで、角がかわいく丸くなっています。オンカーソルで背景色が淡い黄色に変化するシンプルな挙動で、こちらも利用シーンを選ばず使えそうですね。この挙動はCSS3を使って実装していますが、CSS3非対応ブラウザ用にjQueryでの実装もチュートリアル上で紹介されています。見出しのさり気ないグラデーションもいい仕事をしていますね。

角を丸＋ゼブラ仕様でおしゃれなテーブル

http://coliss.com/articles/build-websites/operation/css/css3-tables-with-rounded-corners-by-red-team-design.html

上のテーブルを少し改造したのがこちらのゼブラ仕様のテーブル。こちらも角が丸くなっていて、オンカーソルでは色の変化はありません。グレーベースはどんなページにも合うので、利用シーンを選ばないテーブルデザインとして重宝しそうですね。こちらも詳しいチュートリアルがあります。

シンプルイズベストなワンポイントテーブル

http://creators-manual.com/tablecss/

こちらは会社概要などに使えそうなシンプルでベーシックなテーブルデザイン。行間がゆったりしている点とワンポイントの赤色がオシャレですね。ワンポイントの色はソース中の#be1309の部分をお好みの色に変えるだけでカスタマイズできるので、あなた好みのワンポイントテーブルにカスタマイズするもの楽しそうです。

シンプルを極めたからこそ使いやすいテーブル

http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/2/

色々なCSSデザインテーブルを見かけますが、やはり王道なのはこういったシンプルなデザイン。テーブルはあくまで内容を引き立てるもの、という使われ方をするだけにシンプルなデザインは重宝されるようです。こちらのテーブルも白地に可能な限り枠線を排除したシンプルなもの。100%使いやすいです。

遊びをくわえた主張しすぎないテーブル

http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/5/

ベーシックなデザインですが、背景に柄が入っている遊び心がGoodなテーブルがこちらです。背景画像を設定するテクニックを使うと、シンプルでベーシックなテーブルもこんな風にオシャレに装飾する事ができます。こちらはオンカーソルで背景が白に変わり、読みたいときに文字がよく見える心遣いが素敵。

強調したい列が飛び出すポップなテーブル

http://www.freshdesignweb.com/free-beautiful-css3-table-style.html

あまりテーブルらしからぬデザインですが、こちらもテーブルです。強調したい行が大きく立体的に飛び出しています。紹介元が海外のサイトなので海外感がぷんぷんしてきますが、国内向けでもポップ雰囲気のサイトと相性が良さそうですね。コードは若干複雑になりますが、コピペできるので気にしない方向で。

カラフルでポップな料金表向けテーブル

http://www.wufoo.com/pricing/

海外サイトのポップな料金表向けテーブルデザインです。カラフルな配色とフラットなデザインがいいですね。こちらも強調したい部分だけ少し大きく立体的に表現されています。こちらは残念ながらチュートリアルが無いので、使ってみたい時には上記サイトからHTMLとCSSを解析してみることをおすすめします。

電卓風のデザインでWEB1.0風なテーブル

http://interest2014.blog.fc2.com/blog-entry-54.html

今は懐かしきWEB1.0時代。あの時代を彷彿させるテーブルデザインがこちら、電卓風テーブルデザインです。色の濃い背景に青文字、とか白文字、とか、あの頃にやりましたよね。

ただしこちらのテーブルは彷彿とはさせますが見出しのグラデーションや角丸加工がスタイリッシュで、もちろん今使ってもオシャレなデザインです。黒や濃いグレーの背景のブログなどで重宝しそうですね。

グラデ技の効いたスタイリッシュなテーブル

http://takeshishomepage.com/css3_cool_table

最後はCSSを駆使してグラデーションテクニックを効かせたデザインのテーブル。溶けるようなグラデーションの具合が見事ですね。仕様比較表などに活用できそうなこのテーブルは、余白もたっぷりめに取られていてとても見やすいデザインになっています。ソースも公開されているので、色の変更や余白の調整など少しカスタマイズを加えてみるのもいいかもしれませんね。

tableを部分的に使うのはOK、レイアウトに使うのはNG

これは余談ですが、今回ご紹介したような使い方は問題ありませんが、tableをレイアウトに使うのは原則NGと言われています。というのも、HTML5からtableの考え方が若干変わったんですね。昔は、tableでレイアウトをする事もよくありました。今はdivやnavをfloatでレイアウトする動きが主流ですが、CSSが普及していなかった時代はtableでやっていたのですね。tableのみならず、フォントの色変えや文字サイズの変更もHTML側でやっていました。しかしCSSが主流になった今はtableは本来そういう使い方はしないのが正しい使い方という事で、tableレイアウトはNGという動きが強くなっています。

また、CSSで出来る事はCSSで実装しようが信条のHTML5では、table属性の大半がCSSでも実装できるという理由でほぼ全滅してしまいました。HTML4.01で存在していたborder・cellpadding・cellspacing・frame・rules・widthが廃止の対象になった属性です。このようにHTML5からは少し肩身が狭くなったtableですが、やはり表形式での見せ方に強いのがtable。CSSで綺麗な装飾を施せば使い勝手が良くなるので、ホームページ制作の強い味方です。 ・HTML5タグリファレンス http://www.htmq.com/html5/table.shtml

さて、今回はデザインの参考になるテーブルレイアウトをご紹介しましたが、いかがでしたでしょうか？サンプルコードが紹介されているものはそのまま使ってもOKですし、カスタマイズを加えるとより一層見栄えが良くなる事と思います。お好みのデザインを見つけて、ぜひホームページ制作にご活用下さいね！