Examples Of Beautiful Tables

Placing data in cells often makes content presentation more organized. Here are some examples on how it’s done beautifully.

Bigcartel

Protoshare

Zen

Ballpark

Crazyegg
This table captures attention by using a ‘pop-up’ design for its cheapest sign-up package.

Formspring
Similar to the Crazyegg example, the table attempts to focus viewers’ attention to the most popular subscription by highlighting it in green.

Livestream

Jepco Storage
This is an interesting way of presenting info in the table: Using icons to signify the storage type of a particular address.

Simplified Building Concepts

Domestika

Basecamp

Fetch

Mint

ExpressionEngine

Wrike

Heroku
Again, the use of creative symbols to illustrate the different packages.

Scripts And Tools To Build Better Tables

To assist you in your quest for the most presentable and functional table for your site, feel free to take a look at our compilation of links below which contains a number of useful scripts and tools as a guide.

Alternate Row Colors (Zebra Table)

• Zebra Striping in 15 Steps
  Create alternative row colours in 15 steps with jQuery.

  ?

  

• jQuery Zebra Table Demo
  Making a Zebra Table by using jQuery.

Sort & Filter Table Data

• Using jQuery to Manipulate and Filter Data
  Setting up tables, creating zebra rows, applying hover effect, filtering data and sorting columns.

  ?

  

• HTML Table Filter
  A filter grid bar is added at the top of the desired HTML table. It provides a “filter by column” feature to allow filtering and limits the data displayed within a long table. Works on tables with uneven rows.

  ?

  

• Sorttable
  Sorting a table using the DOM (Document Object Model).

  ?

  

• Sort ‘n’ Scroll Table Javascript
  The script that allows sorting of tables by merely clicking on a column head.

  ?

  

• Tablesorter
  Turn a standard HTML table with THEAD and TBODY tags into a sortable table without refreshing the page. It supports multi-column sorting as well.

  ?

  

• TableFilter
  Sorts and filters multiple columns.

  ?

  

• TinyTable Javascript Table Sorter
  Alternate row highlighting, header class toggling, auto data type recognition and selective column sorting are available in this script. Other features included are column highlighting, optional pagination, support for links, and date/link parsing.

  ?

  

• Unobstrusive Table Sort Script
  Another sorting script for table that provides for multiple columns sorting as well as highlighting of columns.

  ?

  

Grid Listing

• Flexigrid – Web 2.0 Javscript Grid for jQuery
  Lightweight data grid that allows resizing of columns. It also features a scrolling data that matches the headers, and uses Ajax to connect to xml-based data source to load contents.

  ?

  

• dhtmlxGrid
  An Ajax-enabled JavaScript grid control that supports multiple datasources such as XML, JSON, CSV, JS array, and HTML table.

  ?

  

• Extjs Framework GridView3
  Affords standard panel features such as framing, buttons and toolbars.

  ?

  

More Useful Scripts

• TableKit
  TableKit is a collection of HTML table enhancements using the?Prototype framework. TableKit currently implements row striping, column sorting, column resizing and cell editing using Ajax.

  ?

  

• Tablecloth
  By simply adding 2 lines of code to your html page you will have styled and active tables that your visitors will love.

  ?

  

• Tree Table
  Replicate a tree table using HTML.

  ?

  

原文：http://www.hongkiat.com/blog/html-table-building-30-beautiful-examples-and-useful-javascripts/

本文来自: 30+ Beautiful Examples And Useful Javascripts

您或许也会喜欢：