TABLE(テーブル)のデザイン・CSSの参考になるサイト・記事をまとめてみた[シンプルからかっこいい系]

公開日:  最終更新日:2016/10/13

この記事のタイトルとURLをコピーする

TABLE(テーブル)のデザイン・CSSの参考になるサイト・記事をまとめてみた シンプルからかっこいい系
TABLEタグはネットショップの商品ページなどでは、スペック表、価格表としてよく使う機会があるのではないでしょうか?または、コンテンツのレイアウトに利用することも多いです。

そんなTABLEタグですがHTMLでの記述の方法は覚えたんだけど、それだけでは綺麗でかっこいい見た目にするのって難しいですよね。単純に色を付けたり、線を引いたりするだけでも雰囲気は変わりますが、デザインの凝ったサイトにある表は、なんだか綺麗でかっこよくて何より見やすさが違うなと思うことも多いですし、必ずといっていいほどCSS(スタイルシート)で綺麗に装飾されています。

CSS(スタイルシート)での装飾と一言でいっても指定出来ることが非常に多くwebデザインをしている人でもすべての記述を覚えるのは大変です。最近ではtableを簡単に生成したり、table用のCSSジェネレーターなどもあり簡単にCSSを生成出来るようになっていますし、table+cssのサンプルを公開しているサイトもたくさんあります。

個人的にTABLEタグを使う際に、その都度テーブルのデザインどうしようかなーと迷ってしまいテーブルのデザイン集やCSSについて検索することが多いので参考になるサイト・ブログ等をまとめてみました。使ってみたいテーブルデザインが見つかれば幸いです。


この記事がWeb制作関連で有名なLIGさんの

コピペでそのまま使える!デザインtableのcss&HTMLソース5つ | 株式会社LIG

の中で「table専門参考ページ5選」の1つとして掲載いただきました。ありがとうございます!

H27.9.20 レスポンシブテーブルについて追記しました

スポンサードリンク

TABLE(テーブル)のデザイン・CSSの参考になるサイト・記事まとめ

table cssデザインまとめ
さくっとコピペで見た目を整えたい時に使えるものから、角丸の実装方法について詳細な解説の参考になるもの、ジェネレーター系、また、海外のtableデザイン・CSSについての情報をピックアップしてみました。有益な情報を提供して下さるサイト・ブログ様に感謝ですね。


シンプルなテーブルデザイン
cssでデザインするシンプルテーブル |ホームページを小粋に

定番系のシンプルなものが5つ紹介されています。コピペでさくっと実装出来そうです。

122-sample6.png


122-2.png
[使える CSS テクニック]CSSを使った見栄えの良い表組み(table) |バシャログ。

線と背景色だけで表現する見栄えの良いテーブル、背景画像を使った方法なども紹介されています。CSSのソースなども短めなので初心者の方でも簡単に使えそうです。

sample1.png


122-4.png
CSSだけで作るtableデザインテクニック |web creators manual
CSSだけで作るtableデザインテクニックVer.02(おまけ付き) |web creators manual

会社情報を表示する表を題材に線と背景色だけでのサンプルが2つ、シンプルだけどかっこいいサンプルが3つ紹介されています。こちらもCSSのソースなど短めなので初心者の方でも使いやすそうです。

sample3.png


122-5.png
CSS3を使って美しく装飾されたテーブルの作り方 |Webpark

CSS3を使ってテーブルを綺麗に装飾する方法が紹介されています。CSSについての解説が細かくあるので勉強したいという方は、ぜひ目を通してみるのが良いかと思います。

sample5.png


122-7.png
tableを見やすくする CSSデザインパターン |Mdn Design Interractive

連載記事の中の1つでシンプルなものから、マウスオーバーでハイライト、ソート機能付きテーブルなど7つのデザインパターンが紹介されています。ソースがダウンロード出来ないのが残念ですが、どれもとても参考になる内容が紹介されています。

122-sample7.png


122-10.png
CSSでTableをデザインするサンプル集 |CSS Lecture

シンプルなテーブルデザインが10個ほど紹介されています。ソースのダウンロードも可能

122-sample9.png


122-10.png
CSSで出来るレスポンシブ対応を考えた table レイアウト | ホームページ制作│大阪│株式会社ユニオンネット

レスポンシブに対応したテーブルを実装するCSSについて紹介されています。パソコン、スマホ、タブレットと閲覧される媒体、画面サイズも多様化しているので今後はレスポンシブ対応のサイト作りが求められます。TABLEをレスポンシブで実装する際には参考になるかと思います。

122-sample12.png



[CSS]レスポンシブ対応のテーブルを実装するシンプルで、賢いアイデア | コリス

レスポンシブテーブルを実装する際のCSSについてシンプルで実用的なアイデアが紹介されています。

角丸テーブルを実装するのに参考になる記事

角丸テーブル
CSS:角丸のテーブルを作成する方法 | NxWorld

角が丸いテーブルを実装する方法(画像を使わない方法)が紹介されています。テーブルだけではありませんが角丸にすると印象もかなり変わるので興味のある方は参考になるかと思います。

TABLEのCSSジェネレーター

122-13.png
CSS Table Wizard

こちらは、テーブルのボーダースタイルを試したり、スタイルのCSSを生成することが出来るWebサービスです。画面上のボタンをクリックするだけでテーブルスタイルを確認することが出来ます。CSSのソースも生成されるので簡単に確認したい場合などは便利です。

海外のTABLEデザイン・CSSに関する情報

122-1.png
CSS Table Gallery

Design Nameの列で気になるデザインをクリックすると画面上のテーブルデザインが切り替わって確認することができます。 67個のテーブルデザインを見ることが出来ます。また、ダウンロードすることも可能(いくつかダウロード出来ないものもありました)

122-sample11.png


122-12.png
Tableのデザインまとめ | DesignWalker

海外のテーブルデザインの参考になるリンクがまとめられています。


122-11.png
テーブル |php & javascript room

こちらも海外のテーブルデザインの参考になるリンクがまとめられてます。また、ヘッダーの固定やスクロール可能なテーブル(javascript利用)などの情報もあります。


以上、TABLEのデザインの参考になるサイト・記事をまとめてみました。よく利用するパターンをいくつか覚えておくと良いかもしれません。私の場合、色々迷って最終的にシンプルなものに落ち着くって事が多いですが・・・
ぜひ、参考にしてみてください。

また、下記のTABLE関連の下記記事と合わせて利用すれば効率が良いかと思います。

テーブルのマウスオーバー時に行やセルの背景色を変更して表を見やすくする方法

TABLEタグを簡単に自動生成してくれるWebサービスまとめ
楽天市場に限らず、ECサイトなどのページ編集でTABLEタグを使って表形式のレイアウトを使うことって結構ありますよね。 商品の陳列...
Excelの表をTABLEタグに変換「TABLEIZER!」で作業の手間削減!!
少し前に紹介した では、TABLEタグを簡単に生成してくれるサービスをいくつか紹介しました。TABLEタグの記述のやり方がよくわから...
jQueryのみで表<TABLE>の行<TR>やセル<TD>を定期的に動かす簡単な実装方法
このブログでは、jqueryを使ったプラグインということで、今までも画像をスライドさせるものなどいくつか紹介してきました。ただ、プ...
スポンサードリンク
FacebookページやGoogle+ページにもブログ更新・気になる情報を流していますので
よろしければ、この機会にぜひ「フォロー」または「いいね」をよろしくお願いします。

ネットショップ出店をお考えの方はこちらをどうぞ

ネットショップ出店サービス一覧

ショップ運営に使えるjQuery動作デモ1ページにまとめてみた

ECサイト・ネットショップで使えるjQueryデモをまとめてみた

ショップにカルーセル表示を実装「おすすめ」

カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ

ネットショップ運営の効率化に使えるソフト・ASPサービス

ネットショップ受注・在庫・商品・発注管理

ヒートマップ分析も出来る無料のアクセス解析

仕入先・商材をお探しの方はこちらをどうぞ

ネットショップ運営に使える仕入・卸サイト一覧

ネットショップへの集客に使える広告いろいろ

ネットショップへの集客に使える広告まとめ

ネットショップで使えるCSS・JavaScriptのデモを1ページにまとめてみた

ECサイト・ネットショップで使えるCSS・JavaScriptのデモをまとめてみた

ブログでの集客に記事作成代行サービスを活用

記事作成に使える記事外注サービスまとめ

お店(実店舗)の集客に活用できる店舗ポータル・Webサービスまとめてみた

お店(実店舗)の集客に活用できる登録サイト・webサービスまとめてみた

ショップ運営に役立つwebサービス・ツールについてまとめてみた

ECサイト・ネットショップで使えるwebサービス・ツールをまとめてみた

楽天市場の運営者向けの商品陳列HTMLタグ生成無料ツール作ってみました

楽天市場向け無料ツール

ネットショップ運営「おすすめ書籍」


紙媒体より電子書籍(Kindle版)の方がお得です
>>>ネットショップ運営 おすすめ書籍[Kindle版]

Your Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

スポンサードリンク

記事が気に入ったらシェアお願いします

PAGE TOP ↑