<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>李清海&#039;s blog &#187; Ajax</title>
	<atom:link href="http://www.liqinghai.com/tag/ajax/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.liqinghai.com</link>
	<description>Just another wordpress weblog</description>
	<lastBuildDate>Tue, 08 Jun 2010 06:14:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
	
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://www.liqinghai.com/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script>
<script type="text/javascript">
/* <![CDATA[ */
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>21+漂亮的Ajax Css表格</title>
		<link>http://www.liqinghai.com/21-fresh-ajax-css-tables/</link>
		<comments>http://www.liqinghai.com/21-fresh-ajax-css-tables/#comments</comments>
		<pubDate>Tue, 22 Sep 2009 15:26:47 +0000</pubDate>
		<dc:creator>grubylee</dc:creator>
				<category><![CDATA[HTML & CSS]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://www.liqinghai.com/?p=195</guid>
		<description><![CDATA[貌似没有多少设计师愿意谈到表格设计。本文将介绍21种用CSS样式表设计的漂亮表格，并且结合Ajax技术对表格模式的数据进行排序和筛选。要是你也不知道如何设计一个漂亮的表格的话，相信这篇文章应该很有帮助的。 英文原文：21+ Fresh Ajax CSS Tables 1) Tablecloth – 一个轻量极的CSS表格,易于使用,比较清新.. 2) Create a table like Orbitz’s airline flights- 这个CSS表格教程告诉我们如何创建一个表格。并且在鼠标移动到一个单元格时，将提示单元格所在的行、列。 3) A CSS styled table- 这个对于一些功能对比的表格应该是相当合适的鸟，比如说IDC啊，产品销售什么的。 4) Sortable Table 额，这个可以进行数据检索啦。 5) Row Locking with CSS and JavaScript 停留的地方，需要用户再次点击解锁。 作者还发布了另一个教程，使用单选框锁定表格 6) Vertical scrolling tables 表格数据太多的话，可以使用一个滚动条。 7) Replicating a Tree table &#8211; 一个树形结构的CSS表格。 8 ) Paginate, sort and [...]]]></description>
			<content:encoded><![CDATA[<p>貌似没有多少设计师愿意谈到表格设计。本文将介绍21种用CSS样式表设计的漂亮表格，并且结合Ajax技术对表格模式的数据进行排序和筛选。要是你也不知道如何设计一个漂亮的表格的话，相信这篇文章应该很有帮助的。</p>
<p>英文原文：<a title="Permanent Link to 21+ Fresh Ajax CSS Tables" rel="bookmark" href="http://www.noupe.com/css/21-fresh-ajax-css-tables.html">21+ Fresh Ajax CSS Tables</a></p>
<p>1) <a rel="nofollow" href="http://cssglobe.com/lab/tablecloth/">Tablecloth</a> – 一个轻量极的CSS表格,易于使用,比较清新.. <img src='http://www.liqinghai.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':grin:' class='wp-smiley' /> </p>
<p style="text-align: center;"><a href="http://pic.liqinghai.com//2009/09/c1.gif"><img class="size-full wp-image-196 aligncenter" title="c1" src="http://pic.liqinghai.com//2009/09/c1.gif" alt="c1" width="416" height="173" /></a></p>
<p style="text-align: left;"><span id="more-195"></span></p>
<p style="text-align: left;">2) <a rel="nofollow" href="http://www.askthecssguy.com/2007/09/sangeeta_asks_the_css_guy_how_1.html">Create a table like Orbitz’s airline flights</a>- 这个CSS表格教程告诉我们如何创建一个表格。并且在鼠标移动到一个单元格时，将提示单元格所在的行、列。</p>
<p style="text-align: left;"><a href="http://pic.liqinghai.com//2009/09/c2.gif"><img class="aligncenter size-full wp-image-197" title="c2" src="http://pic.liqinghai.com//2009/09/c2.gif" alt="c2" width="416" height="173" /></a><br />
3) <a rel="nofollow" href="http://veerle.duoh.com/blog/comments/a_css_styled_table_version_2/">A CSS styled table</a>- 这个对于一些功能对比的表格应该是相当合适的鸟，比如说IDC啊，产品销售什么的。</p>
<p style="text-align: left;"><a href="http://pic.liqinghai.com//2009/09/c4.gif"><img class="aligncenter size-full wp-image-198" title="c4" src="http://pic.liqinghai.com//2009/09/c4.gif" alt="c4" width="416" height="173" /></a><br />
4) <a rel="nofollow" href="http://www.phatfusion.net/sortabletable/index.htm">Sortable Table</a> 额，这个可以进行数据检索啦。</p>
<p style="text-align: left;"><a href="http://pic.liqinghai.com//2009/09/c5.gif"><img class="aligncenter size-full wp-image-199" title="c5" src="http://pic.liqinghai.com//2009/09/c5.gif" alt="c5" width="416" height="173" /></a></p>
<p>5) <a rel="nofollow" href="http://www.askthecssguy.com/2007/05/brett_asks_the_css_guy_if_the.html">Row Locking with CSS and JavaScript</a></p>
<p>停留的地方，需要用户再次点击解锁。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c3.gif"><img class="aligncenter size-full wp-image-200" title="c3" src="http://pic.liqinghai.com//2009/09/c3.gif" alt="c3" width="416" height="173" /></a>作者还发布了另一个教程，使用<a rel="nofollow" href="http://www.askthecssguy.com/examples/rowlock/example9.html">单选框锁定表格</a></p>
<p>6) <a rel="nofollow" href="http://www.cssplay.co.uk/menu/tablescroll.html">Vertical scrolling tables</a> 表格数据太多的话，可以使用一个滚动条。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c6.gif"><img class="aligncenter size-full wp-image-201" title="c6" src="http://pic.liqinghai.com//2009/09/c6.gif" alt="c6" width="416" height="173" /></a></p>
<p>7) <a rel="nofollow" href="http://www.maxdesign.com.au/presentation/tree-table/">Replicating a Tree table</a> &#8211; 一个树形结构的CSS表格。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c7.gif"><img class="aligncenter size-full wp-image-202" title="c7" src="http://pic.liqinghai.com//2009/09/c7.gif" alt="c7" width="416" height="173" /></a></p>
<p>8 ) <a rel="nofollow" href="http://dev.nozav.org/rails_ajax_table.html">Paginate, sort and search a table with Ajax and Rails</a> -这个例子提供一个动态接口，不需要重载整个页面，实现对表的更改。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c9.gif"><img class="aligncenter size-full wp-image-203" title="c9" src="http://pic.liqinghai.com//2009/09/c9.gif" alt="c9" width="416" height="173" /></a></p>
<p>9) <a rel="nofollow" href="http://www.maxdesign.com.au/presentation/tree-table/">Collapsible tables with DOM and CSS </a> &#8211; 此脚本中允许添加被折叠的表和展开表格的页脚箭头图像。</p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c8.gif"><img class="aligncenter size-full wp-image-204" title="c8" src="http://pic.liqinghai.com//2009/09/c8.gif" alt="c8" width="416" height="173" /></a></span></p>
<p>10) <a href="http://motherrussia.polyester.se/jquery-plugins/tablesorter/">TableSorter plug-in for jQuery</a> &#8211; <span onmouseover="_tipon(this)" onmouseout="_tipoff()">它的主要功能包括多列排序，为TH元素提供RowSpan和</span>colspan支持<span onmouseover="_tipon(this)" onmouseout="_tipoff()">和其他功能支持。</span></p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c10.gif"><img class="aligncenter size-full wp-image-205" title="c10" src="http://pic.liqinghai.com//2009/09/c10.gif" alt="c10" width="417" height="121" /></a></span></p>
<p>11) <a href="http://www.thewatchmakerproject.com/journal/309/stripe-your-tables-the-oo-way">Stripe your tables the OO way</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c11.gif"><img class="aligncenter size-full wp-image-206" title="c11" src="http://pic.liqinghai.com//2009/09/c11.gif" alt="c11" width="416" height="173" /></a></p>
<p>12) <a href="http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php">MOOTOOLS javascript  Table Row &amp; Column highlighting</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c12.gif"><img class="aligncenter size-full wp-image-207" title="c12" src="http://pic.liqinghai.com//2009/09/c12.gif" alt="c12" width="416" height="173" /></a></p>
<p>13) <a href="http://icant.co.uk/csstablegallery/">CSS Table Gallery</a>-93样式表展示</p>
<p><a href="http://pic.liqinghai.com//2009/09/c13.gif"><img class="aligncenter size-full wp-image-208" title="c13" src="http://pic.liqinghai.com//2009/09/c13.gif" alt="c13" width="416" height="173" /></a></p>
<p>14) <a href="http://ideamill.synaptrixgroup.com/jquery/tablefilter/tabletest.htm">jQuery Table Filter</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c14.gif"><img class="aligncenter size-full wp-image-210" title="c14" src="http://pic.liqinghai.com//2009/09/c14.gif" alt="c14" width="416" height="173" /></a></p>
<p>15) <a href="http://www.millstream.com.au/upload/code/tablekit/">Sortable/Resizable/Editable TableKit</a> <span style="background-color: #e6ecf9;" onmouseover="_tipon(this)" onmouseout="_tipoff()">TableKit是HTML表格增强集合使用原型框架。</span><span onmouseover="_tipon(this)" onmouseout="_tipoff()"> TableKit行目前实行分段，列排序，列调整大小和单元格编辑使用Ajax。</span></p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c22.gif"><img class="aligncenter size-full wp-image-211" title="c22" src="http://pic.liqinghai.com//2009/09/c22.gif" alt="c22" width="416" height="173" /></a></span></p>
<p>16) <a href="http://www.kryogenix.org/code/browser/sorttable/">Make all your tables sortable</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c16.gif"><img class="aligncenter size-full wp-image-212" title="c16" src="http://pic.liqinghai.com//2009/09/c16.gif" alt="c16" width="416" height="173" /></a></p>
<p>17) <a href="http://www.alistapart.com/articles/zebratables/">Zebra Tables</a> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">Alistapart为我们提供一个</span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">很好的例子:</span><span onmouseover="_tipon(this)" onmouseout="_tipoff()">使用JavaScript和DOM的应用背景色的样式表单元格。</span></p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c17.gif"><img class="aligncenter size-full wp-image-214" title="c17" src="http://pic.liqinghai.com//2009/09/c17.gif" alt="c17" width="416" height="173" /></a></span></p>
<p>18 ) <a href="http://www.workingwith.me.uk/articles/scripting/standardista_table_sorting">Standardista Table Sorting</a> <span onmouseover="_tipon(this)" onmouseout="_tipoff()">是一种JavaScript模块，可让您任意列排序的HTML数据表。</span></p>
<p><span onmouseover="_tipon(this)" onmouseout="_tipoff()"><a href="http://pic.liqinghai.com//2009/09/c18.gif"><img class="aligncenter size-full wp-image-215" title="c18" src="http://pic.liqinghai.com//2009/09/c18.gif" alt="c18" width="416" height="173" /></a></span></p>
<p>19) <a href="http://extjs.com/playpen/ext-2.0/examples/grid/grid3.html">GridView3 Example</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c19.gif"><img class="aligncenter size-full wp-image-216" title="c19" src="http://pic.liqinghai.com//2009/09/c19.gif" alt="c19" width="416" height="173" /></a></p>
<p>20) <a href="http://joomlicious.com/mootable/">Mootable</a> 因为他们是从标准表了，他们很好地降解。</p>
<p><a href="http://pic.liqinghai.com//2009/09/c20.gif"><img class="aligncenter size-full wp-image-217" title="c20" src="http://pic.liqinghai.com//2009/09/c20.gif" alt="c20" width="416" height="173" /></a></p>
<p>21) <a href="http://tool-man.org/examples/sorting.html">Drag &amp; Drop Sortable Lists with JavaScript and CSS</a></p>
<p><a href="http://pic.liqinghai.com//2009/09/c21.gif"><img class="aligncenter size-full wp-image-218" title="c21" src="http://pic.liqinghai.com//2009/09/c21.gif" alt="c21" width="416" height="173" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.liqinghai.com/21-fresh-ajax-css-tables/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
