「HTMLで作ったテーブルをCSSでおしゃれにデザインしたい！」という方に向けて、コピペで作れるテーブルのデザインのサンプルを11つご用意しました。
実用的なものを意識して用意したので、是非使ってみてください。
テーブルのデザインサンプル
シンプルなストライプ
見本
シンプルなストライプです。使いやすいのでどんなサイトにも合うと思います。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
おしゃれなストライプ
見本
シンプルなストライプのものです。サイトに合わせて色を変えて使ってください。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
ホバーで色が変わる
見本
ポインタを乗せると色が変わります。
他のものと組み合わせて使うことが多いです。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
シンプルで見やすいテーブル
見本用コード
シンプルで見やすいテーブルです。
色は調整してくださいね。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
使いやすい２列タイプ
見本
水色ベースのおしゃれなテーブル。明るめのサイトに合うと思います。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
２列タイプの別パターン
見本
先ほどのテーブルと幅などが少し違います。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
少し変化を加えたパターン
見本
ちょっと変化を加えたテーブル。遊び心を出したい時にどうぞ。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
料金表などに使えるデザイン
見本
料金表などに使えるテーブル。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
経歴などに使えるテーブル
見本
よく見る経歴などに使えるテーブルです。
沿革などにも使えますね。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
サービス比較などに使えるテーブル
見本
サービス比較などに使えるテーブルデザインです。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
診療時間などに便利なテーブル
見本
診療時間表などに使えるテーブルデザイン。
病院などがメインですが、応用すれば他のサイトにも使えそうです。
コピペ用コード
See the Pen Untitled by KEKE (@ffpproce-the-scripter) on CodePen.
まとめ
今回はWebデザインに使える、HTMLとCSSで作るおしゃれなテーブルのデザインを11つ紹介しました。
コピペして、色を調整しながら使ってみてくださいね。
