|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
破洛洛文章简介：一些网页表格的计划技能总结.
一个好的表格应当以易于了解，复杂了然的体例传送大批的信息。真实的重点应当放在信息上，对表格的过分计划会抵消这类感化。从另外一方面来讲，奇妙的计划不但可使一个表格更具吸引力，并且能够增添可读性。表格信息一般是很有趣的
从某种意义下去说，切实其实云云。一个好的表格应当以易于了解，复杂了然的体例传送大批的信息。真实的重点应当放在信息上，对表格的过分计划会抵消这类感化。从另外一方面来讲，奇妙的计划不但可使一个表格更具吸引力，并且能够增添可读性。
明天我们来看看提拔表格功效和美妙的几种体例。我们常常会在网上的代价页上看到表格的使用，因而次要以该种表单为例。请记着这些准绳能够使用就任意范例的信息列表上（不但限于<table>).
垂直，程度或矩阵？Vertical,HorizontalorMatrix?
一如以往，我们从最分明的中央入手下手。第一步是决意表格的全体布局。布局取决于出现数据的范例和庞大性。选择垂直的列仍是程度行，一般取决于团体偏好。大抵计划下表单的内容，然后决意接纳哪一种办法能更好地传送信息。很明显，假如信息包括多变量，那末选择矩阵来暗示。上面分离以几个复杂案例来入手下手。
垂直
程度
矩阵
从Excel中入手下手StartinExcel
但愿这是我第一次也是最初一次倡议用MicrosoftOffice来举行相干计划。现实上，表格的确很简单用Excel来完成，这恰是Excel的刚强。用HTML来构造布局必要写庞大代码，一般会比Excel耗时。
我偶尔发明了一个小的web使用程序：Tableizer，它能够把Excel里的表格粘贴出去转换成HTML。使用这类体例你仍旧必要本人写一些款式，可是会节俭后期的表格构建工夫。
Tableizer
利用表格天生器UseaTableGenerator
仇恨Excel吗？别急，我也是。假如你想节俭本人天生复杂布局的HTML表格工夫，网上有不计其数的表格天生器能够选用。请注重我说的是“复杂布局”。不要觉得用了这些天生器你就甚么都不必要做了。
这里有几款复杂的收费表格天生器：
QuackIt
TableGenerator
Kotatsu
SpectrumResearch
一个小款式走了好长一段路ALittleStylingGoesaLongWay
如今你已有了一个复杂的表格，上面必要加一些CSS.固然你能够花大批工夫选用各类款式。只必要记着，即便一点点的色彩和字体款式都能够年夜幅度进步表格的可读性和吸引力。
这里有一些怎样准确给表格增加款式的指南。
CSS的技能：使用基础的CSS款式表格
Veerle:一个CSS款式表格
增添特性组AddaFeaturedSection
这类做法在代价列内外很罕见，也合用于其他的表格。看看表格的信息是不是有需要让扫瞄者的注重力会合到某个特定地区。用于显现属性的最好值大概某个经常使用要素，用分歧的色彩和/或分歧的巨细来辨别。
有多种办法能够完成这类体例。上面举例申明几则：
分歧色彩
分歧巨细
分歧色彩和巨细
对信息举行排序MaketheInformationSortable
假如表格信息良多，分红几列，能够对列举行排序，用户能够选择按他们但愿的体例扫瞄。Mint.com对买卖列表举行了排序，用户能够很简单地从按日期扫瞄切换到按品种扫瞄，从而能对照出哪一块你乐意花良多钱。如上截图所示，明显我更喜好吃清淡的快餐。
上面是两种对表格排序的分歧办法:
用Ajax(WoorkUp)对表格行排序
表格排序JavaScript(Yoast)
利用图标UseIcons
我在下面提到，表格的信息计划要点是让用户第一眼就可以看分明。经由过程削减需要的浏览，经心计划的图标可以进步扫瞄速率，增添用户对表格信息的了解。
当心这也是个双刃剑。庞大的图标也会让用户利诱，不晓得你事实要表达甚么。
增添斑马条纹AddZebraStripes
这是一个十分基础的观点，能够追溯到信息表格的存在。到场瓜代行色彩能够匡助用户会合视野，把在边上大概底部设定好的分类信息和表格中央的浮动信息联系关系在一同。这个复杂的手艺能够增添巨细表格的可读性。这的确是一个好的履历法例，假如你的表格必要用户联系关系分隔的信息，那末一直包括斑马线（或其他视觉帮助）。
上面是一些给表格增添斑马线的收费资本：
StylingZebraStripedTablesWithCSS(CSSNewbie)
MooToolsZebraTablePlugin(DavidWalsh)
PHPZebraStripingaTable(CSS-Tricks)
jQueryZebraStripeaTable(CSS-Tricks)
为Web2.0做好筹办
闪亮的web2.0款式计划大概有点过分利用。可是这的确能够很快捉住眼球。我相对不倡议对已很庞大的表格增添太多冗余的花梢刺眼的元素，在这类情形下，必要选择复杂的体例。但是，假如你必要计划一个只要几项的小表格，那末也无妨让它看起来奇妙一点。
极简主义
不喜好下面的刺眼web2.0款式？不妨，另有一种很强的概念以为应当削减表格的图形。这类做法可让用户没有任何关扰的只存眷内容。利用洁净渺小的网格线（或没有线条），复杂的字体和色彩，能够很好的和背景构成对照。
增添搜刮功效AddaSearchFeature
偶然候仅仅增添排序功效是不敷的。当你有成页的内容要排序的时分，最好的办法是利用搜刮。
我找到的上面这两种表格过滤办法都接纳了JavaScript。你另有其他的体例吗？
jQueryColumnFilters
Cut&PasteHTMLTablefilterscript
往除冗余Don’tOverloadtheTablewithRedundancies
使用开辟者喜好经由过程表格显现其有多种壮大的功效。但是，偶然候计划者会给表格增添很多没用的过剩的信息，而他们本能够以更好的体例来显现。
看一下InvoiceMachine的例子，表格里除最下面的三种功效，其他功效的四个条目项都一样。该表格因而增添了没有需要的15行。办理办法能够经由过程一个复杂的通告列表申明“我们的企图都包含以下功效”，用户可以疾速看到，他们不管选择哪一个企图，城市具有这些功效。表格只必要延长成3-4行，用来显现分歧的部分。我再次重申，表格应当让信息更容易读。假如您的表格不切合这一方针则会拔苗助长。
创立可扩大地区CreateExpandableAreas
别的一个功效是给表格的特定行增添睁开功效。能够把大批内容安排到一个绝对划一的空间。一个复杂的jQuery小插件jExpand能够完成这个功效。详细完成能够检察tutorialfromjankoatwarpspeed
假如你的表格利用了睁开功效，那末表头必定要计划得能让用户明晰地找到这个功效。不要让用户重重选择才干找到他们所必要的信息。
高亮凸起联系关系性HighlightRelationships
这类手艺增添了庞大表格或矩阵的可读性。不管用户鼠标悬停到单位的列仍是行，城市高亮凸起全部单位。请见详例.
点击以下“AskTheCSSGuy”里的例子能够看到怎样完成这类效果。
怎样创立相似Orbitz’sairline的航空时候和代价矩阵表格
增添静态选择效果AddaDynamicSelectionEffect
这里是“AskTheCSSGuy”里的另外一个例子，同意用户选择表格的给定列（代价表），以后选择会高亮凸起显现，而且能睁开显现更多信息。这类体例和上一个例子是分歧的，可是有分歧的效果。检察demo详细完成请点击：
创立相似CrazyEgg’s代价列表静态高亮列效果的表格
</p>
在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？ |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:19:34
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
楼主