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

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

女性向けのサイトであれば「もう少しオシャレで可愛い表を使いたい!」っていうこともあると思います。そんなときに使えるテーブルHTML/CSSを作りました。(作った人はおっさんです。そこは可愛く修正できないのでご了承ください。)

コピペですぐに使えます。アフィリエイト用の商品比較表デザインもございます。

 

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

オシャレなテーブル・表

パステルカラーテーブル

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

 

Goods1Goods2Goods3Goods4
property1100908070
property2100908070
property3100908070
property4100908070
HTML

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

CSS

 

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

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

Price100yen200yen200yen200yen
Goods1Goods2Goods3Goods4
property1100908070
property2100908070
property3100908070
property4100908070

 

HTML

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

 

CSS

 

ポルカドットテーブル

水玉と言ったらダメなのかポルカドットよ。個人的にチョコミントが好きなので緑ベースをチョイスしました。

Goods1Goods2Goods3Goods4
property1100908070
property2100908070
property3100908070
property4100908070

 

HTML

 

CSS

 

Google Chrome カラーテーブル

SEOに効きそうな Google Chromeカラーのテーブル。ただの縁担ぎテーブル。オシャレでも可愛くもないか。

Goods1Goods2Goods3Goods4
property1100908070
property2100908070
property3100908070
property4100908070

 

HTML

 

CSS

 

Google Chrome カラーテーブル(比較表)

Chromeカラーの比較表。一応、安心カラーのグリーンをイチオシしとこ。

Star★★★ ★★ ★★ ★
Goods1Goods2Goods3Goods4
property1100908070
property2100908070
property3100908070
property4100908070

 

HTML

 

CSS

 

シアンカラーテーブル

シアンのパステルカラーをヘッダーに一色使ったシンプルなテーブル。横配列に見えるデザインなので商品比較にはあまり向かないかも。商品の機能紹介などに。

Goods1Goods2Goods3Goods4
property1100908070
property2texttexttexttext
property3texttexttexttext
property4texttexttexttext

 

HTML

 

CSS

 

マゼンダカラーテーブル

マゼンダのパステルカラーをヘッダーに一色使ったシンプルなテーブル

 

Goods1Goods2Goods3Goods4
property1100908070
property2texttexttexttext
property3texttexttexttext
property4texttexttexttext

 

HTML

 

CSS

 

日本の伝統色を使ったテーブルデザインもオススメです。

コメント