テーブルのデザインってどんなものにするか迷いますよね。多くのwebサイトでテーブルが使われますが、基本的にHTMLとCSSだけで表現しなければいけないのでデザインに制限があり、webデザイナーも頭を悩ませる要素の一つです。
そこで今回はHTMLとCSSだけで実装できるテーブルデザインをたっぷりまとめてみました。コピペですぐ反映できるようになっているのでぜひ活用してみてください！
プランなどで使える料金テーブル
よくサービスのプランの比較に使用される料金テーブルです。人気のプランを目立たせるために中央のデータだけ大きさを変えて飛び出させています。真ん中の飛び出しているセルはposition:absoluteで実現しています。tableの幅は絶対値で固定しているのでレスポンシブ対応させる場合は横スクロールさせる必要があります。
See the Pen
table css sample01 by 林友量 (@dcqamjue-the-animator)
on CodePen.
アイコン風の見出しを入れたテーブル
See the Pen
table css sample02 by 林友量 (@dcqamjue-the-animator)
on CodePen.
セルのデザインが立体的なテーブル
いろんな雰囲気のサイトに溶け込む汎用性の高いテーブルデザインです。webparkさんの記事のコードをを参考にしてわかりやすくリメイクしてみました。
See the Pen
table css sample03 by 林友量 (@dcqamjue-the-animator)
on CodePen.
セルをボーダーで繋いだシンプルなテーブル
見出しセルのthの擬似要素のafterを追加してボーダーを入れています。見出しセルとデータセルの中間にボーダーを置くために微調整が必要です。
See the Pen
table css sample04 by 林友量 (@dcqamjue-the-animator)
on CodePen.
交互に背景色を変えたテーブル
セルの背景色を行ごとに変えています。実装はとてもシンプルでcssでtr:nth-child(odd)をセレクタにすることで奇数行にのみbackground-colorを適用しています。ちなみに偶数行にcssを指定したい場合はtr:nth-child(even)をセレクタにすることで可能です。
See the Pen
table css sample05 by 林友量 (@dcqamjue-the-animator)
on CodePen.
下線の色だけで見出しとデータを分けたデザイン
ボーダーの色だけで見出しセルとデータセルを分けたテーブル。うるさくなりすぎないデザインなのでモダンなサイトに使いやすいデザインのテーブルです。
See the Pen
table css sample06 by 林友量 (@dcqamjue-the-animator)
on CodePen.
タイル風のテーブル
セルの一つ一つを線で囲い隣のセルと離すことでタイルっぽいデザインになっています。tableに対してborder-spacing: 5pxを適用することでセル同士に距離を持たせることができます。
See the Pen
Untitled by 林友量 (@dcqamjue-the-animator)
on CodePen.
見出しに三角矢印を装飾したテーブル
ポップなデザインのサイトに合いそうなテーブルデザイン。三角矢印はthの擬似要素のafterで表現しています。
See the Pen
table css sample07 by 林友量 (@dcqamjue-the-animator)
on CodePen.
列（縦）ごとに色を変えたテーブル
縦のラインでごとにセルの背景色を変更しています。セレクタをtable tr *:nth-child(n)とすることで縦のラインのセルの背景色を一括で指定することができます。サンプルではグラデーションっぽくなっていますが色を変えればカラフルなテーブルが作成可能です。
See the Pen
Untitled by 林友量 (@dcqamjue-the-animator)
on CodePen.
行の背景色がグラデーションになっているテーブル
行（横のライン）が一つの背景色でグラデーションになっているテーブルデザイン。使用するケースは限られてきますが実装は簡単です。trにlinear-gradientを指定するだけで行にグラデーションを適用できます。
See the Pen
Untitled by 林友量 (@dcqamjue-the-animator)
on CodePen.
ユーザーコメント