Webサイト制作時に使いたい！オシャレで使いやすいテーブルデザイン5選

ホームページ上で、テーブル（表）は実によく使われています。

ただし、実際に自分でゼロから作成しようとする場合、そもそも「コードの書き方がわからない」といった問題に直面し、専門的な知識を要していない方にとっては、そう簡単に使えるものではありません。

そこで今回は、初心者でも簡単にテーブル作成ができるWebサイトをご紹介します。

どれもオシャレなテーブルデザインの "ソースコードをそのままダウンロード" するだけなので、簡単に利用することが可能です。また、特に変更されるケースの多い（ソースコード内の）カラーコードについては、本記事の最後に参考URLを紹介しているのでそちらを参照ください。
　　

テーブルデザイン10選

1. CODEPEN

http://codepen.io/warzone246/pen/yiHns

ハイセンスでオシャレなテーブルデザインです。カラフルでポップな印象ですが、シンプルで非常に見やすいこともオススメポイントです。特に、料金表の作成の際にオススメです。
　　

2. Webテンプレート

http://www.tagindex.com/template/table/hover.html

マウスオーバーをした際に、行の背景色が変化するテーブルデザインです。色が変化することで非常に見やすくなり、誤認識も防ぐことができるので、記入したいデータ量が多い場合には特にオススメです。
　　

3. Responsive Pricing Table

https://wordpress.org/plugins/dk-pricr-responsive-pricing-table/

WordPressを使っているWebサイトでは、プラグインを利用してより簡単で分かりやすい表を作成することができます。

このプラグインでは、項目や数字などを入力していくだけで、オシャレな表を作成することができます。アイコンや色の変更も可能で、目立たせたい部分を大きく表示することも可能です。有料版では、デザインの幅が増えたり、表にツールチップを加えたりすることができます。
　　

4. web creators manual

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

シンプルでベーシックなテーブルデザインです。行間がゆったりしていることや、ワンポイントで色を選択できることなどがオススメポイントです。ワンポイントの色は、ソース中の#be1309の部分を変更するだけでカスタマイズできます。
　　

5. CSSだけで作るちょっとだけカッコいいテーブルデザイン

http://sozai.akuseru-design.com/css-sample-07/

5種類のシンプルで見やすいデザインが紹介されています。表の作成目的によって、どのデザインを採用するのか検討が必要ですが、どのデザインも背景色や文字色の変更は可能なので、Webサイトに合ったデザインを選択しましょう。
　　

カラーコード

http://www5.plala.or.jp/vaio0630/hp/c_code.htm

テーブルを使用したいWebサイトによって、使用したい色は様々でしょう。そのような時は、ソースコード内のカラーコードを変更すれば色を変更することができます。

このWebサイトでは、一般的に使用されるカラーコードが16進数とカラーネームがセットになって紹介されています。ぜひ参考にしてみてください。
　　

まとめ

今回は、初心者でも簡単にテーブル作成ができる、オシャレなテーブルデザインのソースコードをそのままダウンロードできるWebサイトを紹介しました。

どのWebサイトも、ソースコードをコピペすれば使用できるものばかりですので、簡単に作成することができます。コードに慣れてきたら、色やフォントなどをカスタマイズしてみるのもいいでしょう。

一見、どのWebサイトでも同じようなデザインになりがちなテーブルですが、少し色やデザイン、テイストを変更するだけで、与える印象は大きく変わります。どのようなデザインがいいのか、目的に沿ったものを使用しましょう。

なお、使用の際はライセンス等がある場合もあります。念のため規約等を一読してから使用しましょう。