建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
當(dāng)談到表格數(shù)據(jù)的設(shè)計(jì)時(shí)，沒(méi)有太多的網(wǎng)頁(yè)設(shè)計(jì)師會(huì)有太大的興趣。在此我們已經(jīng)收集了20多個(gè)功能超大且看上去挺漂亮的Ajax/CSS表格設(shè)計(jì)，并且教你一些表格設(shè)計(jì)中所運(yùn)用的技巧，例如表格數(shù)據(jù)的排序和過(guò)濾等。
讓我們來(lái)看一下這些表格：
1. Tablecloth
Tablecloth由CSS Globe開(kāi)發(fā)，是一個(gè)輕巧易于使用的表格，簡(jiǎn)潔的將表格樣式添加到你的HTML表格元素中。
2. Ask the CSS Guy Table
Ask the CSS Guy Table教給我們要如何去創(chuàng)建能夠清晰顯出去資料之間的相關(guān)聯(lián)系的表格，例如:點(diǎn)擊一個(gè)表格元素時(shí)，將突了顯示這個(gè)元素，并且在縱列和橫列都顯示出相關(guān)的類(lèi)別關(guān)系。
3. A CSS styled table version 2
Veerle Duoh為我們展示了一個(gè)漂亮的表格設(shè)計(jì)，并教我們?nèi)绾问褂肅SS來(lái)吸引用戶(hù)的眼球。
4. Sortable Table
Sortable Table演示了如何按升序或降序排列以及如何過(guò)濾表格中的數(shù)據(jù)。
5. Row Locking with CSS and JavaScript
Css Guy再次對(duì)表格使用了聚焦高亮的效果，除非用戶(hù)再次點(diǎn)擊，否則表單數(shù)據(jù)將一直保持亮高。它還給了我們另一個(gè)示例:another example to Lock rows with radios .
#p#
6. Vertical scrolling tables
如果您有大量的表格數(shù)據(jù)，但卻沒(méi)有太大的空間來(lái)展示它，這可能是個(gè)比較好的方法:一個(gè)純CSS的表格與固定的標(biāo)題和頁(yè)腳，以及滾動(dòng)顯示的內(nèi)容。
7. Replicating a Tree table
這是一個(gè)使用HTML和CSS設(shè)計(jì)的樹(shù)形狀表格。
8.Paginate, sort and search a table with Ajax and Rails
這個(gè)表格提供了一個(gè)動(dòng)態(tài)的界面，而不需要重新刷新整個(gè)頁(yè)面。
9. Collapsible tables with DOM and CSS
此表格加上箭頭形象的腳本提示，用來(lái)控制表格的伸展和收縮。
10. TableSorter plug-in for jQuery
它的主要特性包括多列排序，支持的rowspan和colspan屬性以及許多其他功能。
#p#
11. Stripe your tables the OO way
使用了Javascript為表格中的行進(jìn)行顏色交替，并且添加了onmouseover和onmouseout事件，當(dāng)鼠標(biāo)點(diǎn)擊時(shí)，切換背景顏色。
12. MooTools Table Row & Column highlighting
基于MooTools框架，高亮顯示鼠標(biāo)懸停時(shí)的單元格所在的行和列。
13. CSS Table Gallery
Gallery是一個(gè)專(zhuān)門(mén)收集表格樣式的站點(diǎn)，下面是來(lái)自一個(gè)表格樣式的截圖:
14. jQuery Table Filter
可以對(duì)數(shù)據(jù)進(jìn)行各種不同的排序、過(guò)濾。
15. Sortable/Resizable/Editable TableKit
TableKit基于Prototype框架，專(zhuān)門(mén)收集各種HTML表格，可以利用Ajax實(shí)時(shí)的進(jìn)行表格欄目大小、排序等編輯。
#p#
16. Make all your tables sortable
17. Zebra Tables
alistapart為我們提供了一個(gè)極好的例子，如何使用JavaScript和DOM的改變背景色風(fēng)格，以突出顯示單元格。
18. Standardista Table Sorting
Standardista Table Sorting是一個(gè)Javascript模塊，讓您可以對(duì)HTML數(shù)據(jù)表的任何欄目進(jìn)行排序。
19. GridView3 Example
20. Mootable
21. Drag & Drop Sortable Lists with JavaScript and CSS
文章名稱(chēng)：21個(gè)新奇古怪的網(wǎng)頁(yè)表格設(shè)計(jì)
文章源于：http://www.5511xx.com/article/djpecco.html
