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

関連記事

4件のコメント

コメントを残す

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