21+ 个 Fresh Ajax CSS 表格

红薯 发布于 2011/03/06 12:22
阅读 547
收藏 4

1) Tablecloth – Css Globe has decided to present Tablecloth. Which is a lightweight, easy to use, unobtrusive way to add style and behaviour to your html table elements.

C1 in 21+ Fresh Ajax CSS Tables

2) Create a table like Orbitz’s airline flights- The Css Guy taught us how to create a table that would give an indication of relationships among the information provided for example – clicking on a cell should highlight the associated cell in the top row and left most column.

C2 in 21+ Fresh Ajax CSS Tables

3) A CSS styled table- Veerle Duoh has demonstrated a beautiful usage of tables, for tabular data while implementing them with accessibility in mind and how to make them appealing for the eye using CSS.

C4 in 21+ Fresh Ajax CSS Tables

4) Sortable Table Sort the columns in a table and filter elements in the table.

C5 in 21+ Fresh Ajax CSS Tables

5) Row Locking with CSS and JavaScript

- Again The Css Guy refered to this technique as ‘row locking’, since the effect stays in place until the user re-clicks (or unlocks) the row.

C3 in 21+ Fresh Ajax CSS Tables

He also added another example to Lock rows with radios .

6) Vertical scrolling tablesIf you have a lot of table data but not much room to display it, then this might be the answer. A css only styled table with fixed column headings and footer and scrolling content./p>

C6 in 21+ Fresh Ajax CSS Tables

7) Replicating a Tree table-The aim is to replicate a graphic table tree using HTML./p>

C7 in 21+ Fresh Ajax CSS Tables

8 ) Paginate, sort and search a table with Ajax and Rails-This example provide a dynamic interface which doesn’t need to reload the entire page when the table changes.

C9 in 21+ Fresh Ajax CSS Tables

9) Collapsible tables with DOM and CSS-This script add the arrow images in the footer allowing the table to be collapsed and expanded.

C8 in 21+ Fresh Ajax CSS Tables

10) TableSorter plug-in for jQuery-Its main features include Multi-column sorting, Support for rowspan and colspan on TH elements and many other features

C10 in 21+ Fresh Ajax CSS Tables

11) Stripe your tables the OO way-The ‘stripe’ method runs through each row in the specified table and applies the ‘alt’ class, then adds onmouseover and onmouseout functions.

C11 in 21+ Fresh Ajax CSS Tables

12) MOOTOOLS javascript Table Row & Column highlighting-This shows an mootools javascript example that highlights the table row and column of the cell you are hovering over.

C12 in 21+ Fresh Ajax CSS Tables

13) CSS Table Gallery-This is a showcase of 93 styled tables.

C13 in 21+ Fresh Ajax CSS Tables

14) jQuery Table FilterThis example sorts/filters multiple columns

C14 in 21+ Fresh Ajax CSS Tables

15) Sortable/Resizable/Editable 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.

C22 in 21+ Fresh Ajax CSS Tables

16) Make all your tables sortable

C16 in 21+ Fresh Ajax CSS Tables

17) Zebra TablesAlistapart has provided us an excellent example of using JavaScript and the DOM to apply background-color styles to table cells.

C17 in 21+ Fresh Ajax CSS Tables

18 ) Standardista Table Sorting is a JavaScript module that lets you sort an HTML data table by any column.

C18 in 21+ Fresh Ajax CSS Tables

19) GridView3 Example

C19 in 21+ Fresh Ajax CSS Tables

20) Mootable Because they are made from standard tables, they degrade nicely.

C20 in 21+ Fresh Ajax CSS Tables

21) Drag & Drop Sortable Lists with JavaScript and CSS

C21 in 21+ Fresh Ajax CSS Tables

加载中
返回顶部
顶部