デザインTABLEタグはネットショップの商品ページなどでは、スペック表、価格表としてよく使う機会があるのではないでしょうか?または、コンテンツのレイアウトに利用することも多いです。そんなTABLEタグですがHTMLでの記述の方法は覚えたんだけど、それだけでは綺麗でかっこいい見た目にするのって難しいですよね。単純に色を付けたり、線を引いたりするだけでも雰囲気は変わりますが、デザインの凝ったサイトにある表は、なんだか綺麗でかっこよくて何より見やすさが違うなと思うことも多いですし、必ずといっていいほどCSS(スタイルシート)で綺麗に装飾されています。CSS(スタイルシート)での装飾と一言でいっても指定出来ることが非常に多くwebデザインをしている人でもすべての記述を覚えるのは大変です。最近ではtableを簡単に生成したり、table用のCSSジェネレーターなどもあり簡単にCSSを生成出来るようになっていますし、table+cssのサンプルを公開しているサイトもたくさんあります。個人的にTABLEタグを使う際に、その都度テーブルのデザインどうしようかなーと迷ってしまいテーブルのデザイン集やCSSについて検索することが多いので参考になるサイト・ブログ等をまとめてみました。使ってみたいテーブルデザインが見つかれば幸いです。株式会社LIGの中で「table専門参考ページ5選」の1つとして掲載いただきました。レスポンシブテーブルについて追記しましたスポンサードリンクTABLE(テーブル)のデザイン・CSSの参考になるサイト・記事まとめさくっとコピペで見た目を整えたい時に使えるものから、角丸の実装方法について詳細な解説の参考になるもの、ジェネレーター系、また、海外のtableデザイン・CSSについての情報をピックアップしてみました。有益な情報を提供して下さるサイト・ブログ様に感謝ですね。|ホームページを小粋に定番系のシンプルなものが5つ紹介されています。コピペでさくっと実装出来そうです。線と背景色だけで表現する見栄えの良いテーブル、背景画像を使った方法なども紹介されています。CSSのソースなども短めなので初心者の方でも簡単に使えそうです。manual会社情報を表示する表を題材に線と背景色だけでのサンプルが2つ、シンプルだけどかっこいいサンプルが3つ紹介されています。こちらもCSSのソースなど短めなので初心者の方でも使いやすそうです。|WebparkCSS3を使ってテーブルを綺麗に装飾する方法が紹介されています。CSSについての解説が細かくあるので勉強したいという方は、ぜひ目を通してみるのが良いかと思います。Interractive連載記事の中の1つでシンプルなものから、マウスオーバーでハイライト、ソート機能付きテーブルなど7つのデザインパターンが紹介されています。ソースがダウンロード出来ないのが残念ですが、どれもとても参考になる内容が紹介されています。Lectureシンプルなテーブルデザインが10個ほど紹介されています。ユニオンネットレスポンシブに対応したテーブルを実装するCSSについて紹介されています。パソコン、スマホ、タブレットと閲覧される媒体、画面サイズも多様化しているので今後はレスポンシブ対応のサイト作りが求められます。TABLEをレスポンシブで実装する際には参考になるかと思います。コリスレスポンシブテーブルを実装する際のCSSについてシンプルで実用的なアイデアが紹介されています。NxWorld角が丸いテーブルを実装する方法(画像を使わない方法)が紹介されています。テーブルだけではありませんが角丸にすると印象もかなり変わるので興味のある方は参考になるかと思います。Wizardこちらは、テーブルのボーダースタイルを試したり、スタイルのCSSを生成することが出来るWebサービスです。画面上のボタンをクリックするだけでテーブルスタイルを確認することが出来ます。CSSのソースも生成されるので簡単に確認したい場合などは便利です。Nameの列で気になるデザインをクリックすると画面上のテーブルデザインが切り替わって確認することができます。67個のテーブルデザインを見ることが出来ます。DesignWalker海外のテーブルデザインの参考になるリンクがまとめられています。roomこちらも海外のテーブルデザインの参考になるリンクがまとめられてます。ヘッダーの固定やスクロール可能なテーブル(javascript利用)などの情報もあります。以上、TABLEのデザインの参考になるサイト・記事をまとめてみました。利用するパターンをいくつか覚えておくと良いかもしれません。私の場合、色々迷って最終的にシンプルなものに落ち着くって事が多いですが・・・ぜひ、参考にしてみてください。下記のTABLE関連の下記記事と合わせて利用すれば効率が良いかと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。コメントデータの処理方法の詳細はこちらをご覧ください。万が一問題があればご連絡ください。