HTML+CSS教程:表格Table元素网页制作技巧

2013-09-26 21:55:58  来源:网页教学网 

网页制作Webjx文章简介:table元素在HTML中用于呈现表格数据。你可以把它作为一个描述和展示可用于电子表格的数据的方法。

表格搜索

虽然表格的排列相当困难,但表格的搜索却非常容易。增加一个搜索输入,如果那里的值匹配到了任意一行的文本,则显示该行,并隐藏其他所有的行。使用jQuery来实现就像下面这么简单:

var allRows = $("tr"); $("input#search").on("keydown keyup", function() {   allRows.hide();   $("tr:contains('" + $(this).val() + "')").show(); }); 

这是使用正则表达式来实现的版本:

这是原生JS实现的版本:

表格在流体/响应式设计中会有点难以处理

我过去已经写过这方面的文章,并且我认为这个图形能让你了解到数据表在小屏幕中的体验是怎样的。

我最终对过去的各式各样的解决方案做了一个综述

真正快速的方法:

下面是两个不同风格和需求的实体例子:

固定表头

这也是我以前写过的东西并且还做了一小段视频。这些东西都已经有一段历史了,但这些案例还是能使用的

最现代的固定表头的办法是position: sticky;这儿有一篇相关的文章。老实说我并不确定这个推荐的方法是否可行。在正常情况下它无法在中起作用。这还是有点意义的因为你无法在表格里面进行绝对定位子元素。但它在<th>当中是起作用的。不管怎样,如果有人想把它弄清楚,这会是对这篇文章的一个很好的更新。

这里是使用 jQuery 插件实现的一个例子:

使用 Emmet 来创建表格标签

有一大堆的理由可以说明 Emmet 是个好工具,其中一个就是可以用它来书写缩略的 HTML 然后再一键拓展为真正的 HTML,因为表格通常都是重复性比较高并且很冗长的。 Emmet 对它来说实在是太适合了,Emmet 还能在 CodePen 运行呢。=)

简单的4行4列

table>tr*4>td*4 

5行并且包含左侧标题信息

table>tr*5>th+td*4 

一行并包含上方标题信息

table>tr>th*5^tr*3>td*5 

具有自增ID的员工信息表

table>tr>th{Name}+th{ID}+th{Favorite Color}^tr*3>td{Name}+td{$$$}+td{Blue} 

包含头部尾部和内容的表格

table>thead>tr>th{Header Cell}*5^^tfoot>tr>th{Footer Cell}*5^^tbody>tr*10>th{Row Header}+td{Cell Data}*4 

Javascript生成表格

Javascript通过HTMLTableElementAPI提供了非常明确的用于处理表格的方法。Louis Lazaris最近写了一些关于这方面的东西。你可以通过阅读它来使用JS生成表格,访问子元素,以及用特别的方法来改变属性。这是MDN站上的相关资料。

下面是给出的例子:

表格排序

假设现有一个具有两列的表格。一列用于记录员工的ID,另一列用于记录员工的email地址。每一列上方都有一个标题。可以通过点击标题来对该列的数据进行排序。举个例子,ID以数值进行排序,邮件地址以字母进行排序,两者可以进行升序和降序的切换。这就是表格排序,能够使数据起更大的作用。

这是一个相当常用的需求,这还有一份为其准备的说明书。只要将sortable属性放进 table 当中,它便会自动地排序只要遵循说明书中的几条规则。

在写下这篇文章的时候,我不知道是否有任何的浏览器支持表格的原生排序。但这还有提供了三个额外的实现方法!

  • tablesorter - 基于jQuery的 "灵活的客户端表格排序"
  • sorttable - 原生 javaScript
  • tablesort - "一个精简的应用于表格排序的组件。原生 Javascript 实现,没有其他的依赖。"

下面是表格排序的例子:

如果上面这些并没有帮助到你,Codrops 收集的33中表格排序脚本,可以给予你更多的选择。

这些都是 Javascript 的解决方法。也可以通过在后端进行排序然后将排序好的数据直接在前端呈现。这个方法可以用在:在分页表格中,当DOM中的所有数据并不是马上可用的时候。

更多信息

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

白牙

互联网开发者,关注Web应用开发,前端交互设计。个人博客,多多交流,愿与大家共同进步。

如需转载烦请注明出处:

英文原文:http://css-tricks.com/complete-guide-table-element/

中文译文:http://www.w3cplus.com/css/complete-guide-table-element.html

 

共7页: 上一页 [1] [2] [3] [4] [5] [6] 7 下一页
更多