Table collapses into a "list" on small screens. Headers are pulled from data attributes.

This is a data table for a jQuery plugin I am working on. I wanted to share the hover effect I am using. If you hover of a table row, the sibling rows will blur and fade out.

Based on: Material Design by Google (http://www.google.com/design/)

Tested on Win8.1 with browsers: Chrome 37, Firefox 32, Opera 25, IE 11, Safari 5.1.7

Create and edit an HTML5 table without the use of a library. Uses HTML5's contenteditable and minimal JavaScript.

When designing a pricing table for a product or service, your job as a web designer/developer is to make sure that the table is easy to understand, intuitive and clear. This way, you will help users to choose the best plan for theirs needs.

Dribbble rebound of Vlade Dimovski's pricing table. http://dribbble.com/shots/842947-Pricing-Table

You can switch the order of elements using the magical powers of CSS's table properties. Jeremy Keith wrote about this technique, and you can check out a demo on JSBin.

Data table example

Using CSS for table layouts instead of floats. Responsive (everything goes down to one row each), too.

How To Code a Sortable Table with jQuery

Tutorial from Treehouse Blog: http://blog.teamtreehouse.com/how-to-code-sortable-tabular-data-with-jquery

Keyboard & mouse control on this heavy table !

Responsive CSS table, that turns into an accordion menu on small screens. Change Radio inputs to Checkboxes to expand multiple sections.