Tableのデザインまとめ

料金表やスペック表などに使えそうなTableのデザインを探してみるといろいろと見つかりました。

以前にもこのブログで「TableとCSSいろいろ」でもご紹介しましたが、

今回はTableのデザインパート2と言う事で、いろいろとまとめてみました。サンプルやダウンロードページが別に分かれているところは、そちらのリンクも記載しておきましたので、参考にどうぞ。

dhtmlxGrid

ダウンロード


dhtmlxGrid

Unobtrusive Table Sort Script



A CSS styled table version 2

デモ


A CSS styled table version 2

Designing Tables for Usability

デモページ


Designing Tables for Usability

MOOTOOLS JAVASCRIPT TABLE ROW & COLUMN HIGHLIGHTING


MOOTOOLS JAVASCRIPT TABLE ROW & COLUMN HIGHLIGHTING

tablesorter 2.0

デモ | ダウンロード



jQuery plugin: Tablesorter 2.0

デモ | ダウンロード


jQuery plugin: Tablesorter 2.0

GridView3

ダウンロード


GridView3

phatfusion : sortableTable

ダウンロード


phatfusion : sortableTable

TableKit

ダウンロード


TableKit

Data Tables and Cascading Style Sheets Gallery

一番左のカラムのDesign Nameをクリックするとデザインが切り替わります。気に入ったデザインは、一番右のカラムのDownloadからCSSファイルをダウンロードすることが出来ます。


Data Tables and Cascading Style Sheets Gallery

Replicating a Tree table


Replicating a Tree table

Normal Table Test


Normal Table Test

Vertical scrolling tables


Vertical scrolling tables

Brett asks the CSS Guy if the Row Locking with Checkboxes is fixed

デモ


Brett asks the CSS Guy if the Row Locking with Checkboxes is fixed

how to create a table like Orbitz’s airline flights scheduling and pricing matrix

デモ


how to create a table like Orbitz's airline flights scheduling and pricing matrix

Pure CSS Scrollable Table with Fixed Header


Pure CSS Scrollable Table with Fixed Header

Tablecloth

ダウンロード


Tablecloth

mootable

ダウンロード


mootable

Creating a table with dynamically highlighted columns like Crazy Egg’s pricing table

Crazy Egg’sのサイトのような、飛び出すカラムのデザインチュートリアル。


Creating a table with dynamically highlighted columns like Crazy Egg's pricing table

Stripe your tables the OO way

デモ


Stripe your tables the OO way

CSS-Based Tables: Modern Solutions

CSSを使ったきれいなTableのデザインサンプル集です。


CSS-Based Tables: Modern Solutions

Pricing Tables: Examples And Best Practices

こちらは料金表のデザインのまとめです。きれいな料金表がたくさんまとめられております。


Pricing Tables: Examples And Best Practices

デザインblogランキング

コメント 4 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



4 Responses to “Tableのデザインまとめ”

  1. 次なるもの » Blog Archive » Tableのデザインまとめ | DesignWalker Says:

    […] Tableのデザインまとめ | DesignWalker 料金表やスペック表などに使えそうなTableのデザインを探してみるといろい ろと見つかりました。以前にもこのブログで「TableとCSSいろいろ」でもご紹介 しましたが、今回はTableのデザインパート2と言う事で、いろいろとまとめて みました。サンプルやダウンロードページが別に分かれているところは、そちら のリンクも記載しておきま… original article […]

  2. センスの良い商品の紹介と感想とよた話 Says:

    深田恭子さんのドロンジョ姿…

    今日の『気になるニュース』 ~今日あったニュースの中から、注目ニュースをPickUp~ [一覧] ・門外不出!?美味しいそばつゆの作り方 [美味しいそばつゆの作り方] 読んでるとなん…

  3. Bluebeck blog - links for 2009-01-14 Says:

    […] Tableのデザインまとめ (tags: webdesign CSS table) […]

  4. Daily Summary 2009-01-16 - mskari.org Says:

    […] Tableのデザインまとめ[Webデザイン,CSSXHTML,JavaScript] […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ