意外と面倒なtableがコピペで簡単に実装できるサンプルコード15選

コーディングする際に、何気なく重宝するコードがtableです。
そんなtableですが、コーディングしていると乱雑になってしまったり少し凝ったデザインにしようしても、いまいちと感じてしまうことが多々あります。

今回は、オシャレなtableが簡単に実装できるCSS3のサンプルコードをご紹介します。
コピーペーストで簡単に使えますので、ぜひホームページのデザインに取り入れてみてください。

コピペで使えるtableのサンプルコード19選

1.CSS3のセレクターで作るストライプテーブル

http://ascii.jp/elem/000/000/462/462099/
汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。
CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。
以前のCSS1、2の場合だと背景色を変えるのは結構手間がかかっていましたが、CSS3であれば手軽に実装が可能です。
手順も詳しく解説しており、実務で使いやすい実践的な内容となっています。

2.第3回 CSS3で視認性の高いテーブルを作る

http://thinkit.co.jp/story/2011/08/04/2224
CSS3で新たに登場した、:nth-child()擬似クラスを活用したサンプルコードです。
1行ごとに色が違う複雑なゼブラテーブル、ネットショップでよく見る曜日で色の異なるカレンダーをサクッと作成することができます。
視認性の高いデザイン性に優れたテーブルも、CSS3であれば手軽に作ることが可能となります。
作成方法も覚えることができますので、スキルアップにもつながります。

3.HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点

http://liginc.co.jp/web/html-css/html/86739
近年トレンドのデザインである、フラットデザインにぴったりのテーブルが簡単にできるサンプルコードです。
シンプルな色合いも使い勝手がよく、三角矢印がユニークでお洒落な印象です。
応用編として、さらにborder-radiusを組み合わせたテーブルも紹介しています。
こちらも料金表として幅広く活用できます。

4.CSS3 Pricing Table

http://codepen.io/AnthonyMoss/pen/xsioF
マウスオーバーで色が変わる、シンプルな料金表テーブルを作成することができるサンプルコードです。
料金の種別の部分だけ背景色を変えていたり、マウスオーバー時に価格部分だけが色が変わらないなど細部までこだわったデザインです。
点線のデザインも特徴的です。

5.Free Pricing Tables Using CSS3

https://github.com/dchapkine/css3-pricing-table
カラフルな色使いが素敵な料金表テーブルを作成することができます。
各テーブル左にプラン名の表記があり、個性的なデザインとなっています。
行ごとに色が違ったり項目ごとにアイコンがついていたりと、見やすさ・わかりやすさも抜群です。

6.Feature table design with CSS3

http://red-team-design.com/feature-table-design-with-css3/
丸みを帯びた角とシャドウが特徴のある、シンプルデザインのテーブルを作成することができます。
解説つきで編集も簡単にできますので、角丸テーブルを使いたいという時に重宝します。

7.Pricing Table

http://cssdeck.com/labs/pricing-table
円を取り入れた、デザイン性に優れたお洒落なテーブルを作ることができるサンプルコードです。
中央の料金部分の背景が円になっているなど、あまり見かけないデザインとなっています。
最近よく見かける、シンプルなフラットデザインに取り入れやすいテーブルです。

8.Multiple Pricing Table

http://codepen.io/markthema3/pen/cLKmC
落ち着いたグレー系のカラーで統一した、シンプルな料金表テーブルです。
かっちりとしつつも、角の丸みが優しい印象を与えています。
アクセント的に、ボタン部分だけは明るいブルーでデザインしているのも特徴です。
あらゆるビジネスに最適なデザインです。

9.Very beautiful CSS3 Pricing Tables effect

http://www.htmldrive.net/items/show/1287/Very-beautiful-CSS3-pricing-tables-effect
リボン、ギザギザ感がお洒落な料金表テーブルを作ることができます。
うっすらと見える背景デザインも素敵です。
とにかくデザインのいいものを選びたいという場合にオススメです。

10.Simple Little Table CSS3

ライトグレーのシンプルで汎用性抜群なテーブルを作ることができるサンプルコードです。
1行ごとに若干色の濃淡が異なりますので、見づらいということもありません。
行、列の増やしかたといった使用方法も記載がありますので、カスタマイズがあまり得意でないという方でも使用しやすくなっています。

11.Mini Free Pricing Table

http://codepen.io/joejoinerr/pen/CJAkK
ビタミンカラーがキュートな、ミニサイズの料金表テーブルを作ることができます。
表記内容は料金・プラン名・売り買いの文字のみと、とてもシンプルな内容です。
場所をとらないので、ホームページ内にちょっとした料金案内をつけたいという時に重宝します。

12.Free Responsive CSS Pricing Table with HTML/CSS

http://codepen.io/scottnix/pen/ndJvb
黒を貴重とした、クールな料金表テーブルを作成することができるサンプルコードです。
程よいシャドウと、エメラルドグリーンの差し色が効いています。
ボタン部分は、マウスを乗せるとゆっくりと色が変わります。
かっこいいテーブルをお探しの際にオススメです。

13.Feature Table Design

https://css-tricks.com/feature-table-design/
インパクトのある、グリーン系カラーの料金表テーブルを作成することができるサンプルコードです。
画像と表を組み合わせることで、デザイン性の高いテーブルが出来上がっています。
プラン名の部分に実際に使用してある画像もダウンロードすることが可能です。

14.CREATE CSS3 PRICING PLAN TABLES TUTORIAL

http://designbump.com/css3-pricing-tables-tutorial/
あまり見ない、オレンジの縁取りがお洒落な料金表テーブルを作ることができます。
オススメのプランのみ縁取りが施してあり、色も異なりますのでよく目立ちます。
チュートリアルつきですので、色変更も手軽におこなうことが可能です。

15.CSS3 pricing table

http://codepen.io/arkev/pen/EDeuG
ツヤ、立体感のある高品質な料金表テーブルを作成することができるサンプルコードです。
微妙なグラデーションと影を取り入れており、見た目の良さはもちろん、わかりやすさも抜群です。
強調したいプランのみ若干デザインが異なるのもユニークです。

まとめ

以上、tableが簡単に実装できるサンプルコードをご紹介しました。
いかがでしたでしょうか。

CSS3が登場してから、これまで以上に実現できるものが増えています。
上記でご紹介したページでは、簡単にコピーペーストで使うことができますので、ぜひtableを利用する機会があれば試してみてください。

また、ご紹介した中にはコード以外にチュートリアル付きのものも沢山あります。
解説を見ながらカスタマイズしたり自分で作ってみると、さらにオリジナリティ溢れるデザインのtableを作成することが可能です。

このニュースを読んだあなたにおすすめ

いくらでも持っておきたい無料のパターン素材60選
【2015年版】商用無料の人気フリーフォント35選
Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ