女性向けのサイトであれば「もう少しオシャレで可愛い表を使いたい!」っていうこともあると思います。そんなときに使えるテーブルHTML/CSSを全部で7種類作りました。2ページ目もあるのでどうぞ最後までお付き合いください。
コピペですぐに使えます。商品比較表デザインもございます。
(この記事は2ページに分かれています。)
頻繁にテーブルを使う方へ
よろしければテーブルの挿入の基本操作がすぐに覚えられる次の記事も合わせてお読みください。当ブログで使っているテーブル構造の作り方が分かれば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 |
HTML / CSS
CSSを追加したあと、テーブルタグに 【osare-table col5t】の2つのクラス名を加えるだけでOK。
See the Pen おしゃれテーブル1 by keiichi iwanaga (@confetti) on CodePen.
パステルカラーテーブル(比較表)
アフィリエイトの商品比較におすすめ。1位商品をアピール(HTMLとCSSをコピペするだけ)したいときに。一番左の商品を強調するように設定しています。コピペだけで1位推しの比較表が出来上がります。
Price | 100yen | 200yen | 200yen | 200yen |
---|---|---|---|---|
Goods1 | Goods2 | Goods3 | Goods4 | |
property1 | 100 | 90 | 80 | 70 |
property2 | 100 | 90 | 80 | 70 |
property3 | 100 | 90 | 80 | 70 |
property4 | 100 | 90 | 80 | 70 |
HTML / CSS
通常は、CSSを追加したあとテーブルタグにクラス名【osare-table osare-hikaku col5t】の3つを追加するのみで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 |
HTML/CSS
See the Pen LmrZdo by keiichi iwanaga (@confetti) on CodePen.
コメント