本文收集整理20多個功能超強並且挺漂亮的Ajax/CSS表格設計分享給大家,這些表格有表格式資料的排序和過濾等。
讓我們來看一下這些表格:
1. Tablecloth
Tablecloth由CSS Globe開發,是一個輕巧便於使用的表格,簡潔的將表格樣式添加到你的HTML表格元素中。
2. Ask the CSS Guy Table
Ask the CSS Guy Table教給我們要如何去建立能夠清晰顯出去資料之間的相關聯絡的表格,例如:點擊一個表格元素時,將突了顯示這個元素,並且在縱列和橫列都顯示出相關的目錄關係。
3. A CSS styled table version 2
Veerle Duoh為我們展示了一個漂亮的表格設計,並教我們如何使用CSS來吸引使用者的眼球。
4. Sortable Table
Sortable Table示範了如何按升序或降序排列以及如何過濾表格中的資料。
5. Row Locking with CSS and JavaScript
Css Guy再次對錶格使用了聚焦高亮的效果,除非使用者再次點擊,否則表單資料將一直保持亮高。它還給了我們另一個樣本:another example to Lock rows with radios .
6. Vertical scrolling tables
如果您有大量的表格式資料,但卻沒有太大的空間來展示它,這可能是個比較好的方法:一個純CSS的表格與固定的標題和頁尾,以及滾動顯示的內容。
7. Replicating a Tree table
這是一個使用HTML和CSS設計的樹形狀表格。
8.Paginate, sort and search a table with Ajax and Rails
這個表格提供了一個動態介面,而不需要重新重新整理整個頁面。
9. Collapsible tables with DOM and CSS
此表格加上箭頭形象的指令碼提示,用來控製表格的伸展和收縮。
10. TableSorter plug-in for jQuery
它的主要特性包括多列排序,支援的rowspan和colspan屬性以及許多其他功能。
11. Stripe your tables the OO way
使用了Javascript為表格中的行進行顏色交替,並且添加了onmouseover和onmouseout事件,當滑鼠點擊時,切換背景顏色。
12. MooTools Table Row & Column highlighting
基於MooTools架構,高亮顯示滑鼠移至上方時的儲存格所在的行和列。
13. CSS Table Gallery
Gallery是一個專門收集表格樣式的網站,下面是來自一個表格樣式的:
14. jQuery Table Filter
可以對資料進行各種不同的排序、過濾。
15. Sortable/Resizable/Editable TableKit
TableKit基於Prototype架構,專門收集各種HTML表格,可以利用Ajax即時的進行表格欄目大小、排序等編輯。
16. Make all your tables sortable
17. Zebra Tables
alistapart為我們提供了一個極好的例子,如何使用JavaScript和DOM的改變背景色風格,以反白儲存格。
18. Standardista Table Sorting
Standardista Table Sorting是一個Javascript模組,讓您可以對HTML資料表的任何欄目進行排序。
19. GridView3 Example
20. Mootable
21. Drag & Drop Sortable Lists with JavaScript and CSS