LINEで送る
Pocket

料金表やスペック表などに使えそうな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

Similar Posts:

LINEで送る
Pocket


4 Thoughts on “Tableのデザインまとめ”

コメントを残す

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