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

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

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

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

テーブルデザインまとめ

1. CODEPEN

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

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

2. Responsive Pricing Table

スクリーンショット_2018-01-22_8.18.16.png
https://wordpress.org/plugins/dk-pricr-responsive-pricing-table/

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

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

3. web creators manual

web creators manual

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

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

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

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