オシャレで可愛いテーブルデザイン【 HTML / CSS 】

女性向けのサイトであれば「もう少しオシャレで可愛い表を使いたい！」っていうこともあると思います。そんなときに使えるテーブルHTML/CSSを全部で７種類作りました。２ページ目もあるのでどうぞ最後までお付き合いください。

コピペですぐに使えます。商品比較表デザインもございます。

（この記事は２ページに分かれています。）

頻繁にテーブルを使う方へ
よろしければテーブルの挿入の基本操作がすぐに覚えられる次の記事も合わせてお読みください。当ブログで使っているテーブル構造の作り方が分かればCSSのクラス名を変えるだけでテーブルデザインをすぐに変える事ができます。

オシャレなテーブル・表

カラフルなパステルカラーと角の丸みで女性らしさをアピール。色は濃い目なので目立たせたいときに。

	Goods1	Goods2	Goods3	Goods4
property1	100	90	80	70
property2	100	90	80	70
property3	100	90	80	70
property4	100	90	80	70

CSSを追加したあと、テーブルタグに【osare-table col5t】の２つのクラス名を加えるだけでOK。

アフィリエイトの商品比較におすすめ。１位商品をアピール（HTMLとCSSをコピペするだけ）したいときに。一番左の商品を強調するように設定しています。コピペだけで１位推しの比較表が出来上がります。

	Goods1	Goods2	Goods3	Goods4
Price	100yen	200yen	200yen	200yen
property1	100	90	80	70
property2	100	90	80	70
property3	100	90	80	70
property4	100	90	80	70

通常は、CSSを追加したあとテーブルタグにクラス名【osare-table osare-hikaku col5t】の３つを追加するのみでOKです。

See the Pen Fashionable Table 2 by keiichi iwanaga (@confetti) on CodePen.

個人的にチョコミントが好きなので緑ベースをチョイスしました。

	Goods1	Goods2	Goods3	Goods4
property1	100	90	80	70
property2	100	90	80	70
property3	100	90	80	70
property4	100	90	80	70

See the Pen LmrZdo by keiichi iwanaga (@confetti) on CodePen.