20 個經典的 Ajax + CSS 表格

並不是所有的Web 開發人員都會對美化表格式資料感興趣，今天我們收集了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
示範了如何利用Javascript 和 CSS 實現“鎖定行”的效果，選中的行會一直顯示高亮效果直到使用者再次點擊才會消失。

#6. Vertical scrolling tables
如果你有大量的資料但是沒有足夠大的空間來顯示它，這會是一個很好的解決辦法。通過CSS 固定表格的頁首和頁尾，但是內容卻可以滾動顯示。

#7. Replicating a Tree table
利用HTML 和CSS 建立的樹狀表格。

#8. Collapsible tables with DOM and CSS
利用DOM 和CSS 建立的可摺疊的表格效果。表格頁尾部分包含的箭頭有一個名為“footcollapse”的類，通過為之添加Javascript 代碼可以讓表格展開或摺疊。

#9. TableSorter plug-in for jQuery
為jQuery 定製的外掛程式，它的主要功能包括允許多列排序，支援 元素的rowspan 和colspan 屬性。

#10. Stripe your tables the OO way
利用Javascript 為指定表格中的行定義交替顏色，並添加onmouseover 和onmouseout 事件。

#11. MooTools Table Row & Column highlighting
利用MooTools 架構高亮顯示滑鼠移至上方的儲存格所在的行和列。

#12. CSS Table Gallery
又一個利用CSS 高亮顯示滑鼠移至上方當前行時的表格效果。

#13. jQuery Table Filter
為jQuery 架構開發的表格排序、過濾外掛程式，可以通過Ctrl + 按一下滑鼠選擇多重列。

#14. PHP Ajax Table
支援所有主流瀏覽器，自動填入資料，利用後台PHP / MySQL 可以即時滾動、排序、編輯、添加、過濾資料。包括預設、MS Office 2007 、 MS Office XP Excel 三種樣式。

#15. SortTable
只需為你想要排序的表格添加一個名為“sortable ”的class ，就可以實現表格的排序功能。

#16. Zebra Tables
A List Apart為我們提供了一個極好的利用Javascript 和 DOM 為表格的儲存格應用背景色的樣本。

#17. Standardista Table Sorting
Standardista Table Sorting 是一個可以讓你按照表格的任何列進行排序的Javascript 指令碼。

#18. GridView3 Example
利用Ext Js 架構，功能強大的表格。

#19. Mootable
利用MooTools 架構開發的又一個可排序的表格。

#20. Drag & Drop Sortable Lists with JavaScript and CSS
利用Javascript 和 CSS 實現的可以拖曳、排序列表的效果。