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

オシャレで可愛いテーブルデザイン HTML / CSSレイアウト(HTML/CSS)
スポンサーリンク

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

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

(この記事は2ページに分かれています。)

 

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

 

オシャレなテーブル・表

パステルカラーテーブル

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

 

Goods1Goods2Goods3Goods4
property1100908070
property2100908070
property3100908070
property4100908070

HTML / CSS

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

See the Pen おしゃれテーブル1 by keiichi iwanaga (@confetti) on CodePen.

 

パステルカラーテーブル(比較表)

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

Price100yen200yen200yen200yen
Goods1Goods2Goods3Goods4
property1100908070
property2100908070
property3100908070
property4100908070

 

HTML / CSS

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

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

ポルカドットテーブル

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

Goods1Goods2Goods3Goods4
property1100908070
property2100908070
property3100908070
property4100908070

 

HTML/CSS

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

この記事を書いた人
がんちゃん

がんちゃんブログ運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。アフィリエイトにランチェスター戦略を取り入れた経営を目指しています。

がんちゃんをフォローする
スポンサーリンク
レイアウト(HTML/CSS)
スポンサーリンク
がんちゃんをフォローする
がんちゃんブログ

コメント