`
liss
  • 浏览: 844070 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

十个最简单实用的Table设计模板

    博客分类:
  • HTML
阅读更多

表格恐怕是 Web 设计中最困难的一个对象了,感谢神秘的标记语言,有太多的细节我们需要关注了,而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素,但是它浪费了我们大量的时间。有人甚至说,标签是垃圾。其实表格本身并没有什么,是你自己使用的不当,把简单的事情弄的复杂了。这就是我写下本篇文章的原因,它将向你展示十个最简单表格设计方法。

 

准备

想必大家都知道 xhtml 1.0 strict 标准,下面是一个符合 xhtml 1.0 strict 标准的例子。

 

Html代码
  1. <!-- Table markup-->   
  2. < table   id = "..."   border = "0" >   
  3.    
  4. <!-- Table header -->   
  5. < thead >   
  6.     < tr >   
  7.          < th   id = "..."   scope = "col" > ... </ th >   
  8.           ...  
  9.     </ tr >   
  10. </ thead >   
  11. <!-- Table body -->   
  12. < tbody >   
  13.     < tr >   
  14.          < td > ... </ td >   
  15.          ...  
  16.     </ tr >   
  17.     ...  
  18. </ tbody >   
  19. <!-- Table footer -->     
  20. < tfoot >   
  21.     < tr >   
  22.          < td > ... </ td >   
  23.     </ tr >   
  24. </ tfoot >   
  25. </ table >   
<!-- Table markup-->
<table id="..." border="0">
 
<!-- Table header -->
<thead>
    <tr>
         <th id="..." scope="col">...</th>
          ...
    </tr>
</thead>
<!-- Table body -->
<tbody>
    <tr>
         <td>...</td>
         ...
    </tr>
    ...
</tbody>
<!-- Table footer -->  
<tfoot>
    <tr>
         <td>...</td>
    </tr>
</tfoot>
</table>
 

 

 

在我们开始之前,温习一下所谓的使用表格的规则:

  1. 表格的宽度
    根据内容,小心的设置表格的宽度,如果你不知道确切的宽度的话,设置成100%准没错。如果内容很多把表格撑的很大的时候,把表格的宽度设置的大一些肯定比小一些要好看的多。
  2. 给 td 加点 padding
    虽然在表格中 td 的排列很整齐,但是这并不是说,我们要把它们排列地很紧凑,给它们点间距,这样看起来就不那么难以阅读了。
  3. 表格就是文字
    阅读表格与阅读文字是很类似的,而且会花费更多的时间去理解表格。所以当表格中有金额的时候,注意它的对比度。使用柔和的颜色,使之看起来更舒服一些。总之,要使表格的风格更容易阅读,而不是相反。

好,下面我们开始进入正题。

1. 水平简约型

所谓水平表格,顾名思义,就是水平地去看表格而不是竖直地看,它每一行都代表一个实体。你可以给这种表格设置最简约的风格:简单地给单元格(td and th )设置足够的 padding ,在表头下设置2个像素的边框。

 

 

因为水平表格是被每行每行的阅读,所以清楚的行边界会起到事半功倍的效果。如果没有行边界,而且行数很多的情况下,表格阅读起来是很困难的。所以下面的表格中,我给每个 td 下加了一个像素的下边界。

 

 

请注意 tr:hover 一个很有用的辅助人们阅读表格的方法。当鼠标停留在一个单元格上时,这个单元格所在的行就会被标亮。如果表格有很多列时候,这个方法会很容易的追踪到你关注的行。

重点
仔细调整单元格之间的间距
优点
很简单的设计,对于简单的表格很合适
缺点
tr:hover 在IE6下不能使用, 如果表格有很多的列,看起来会很混乱

2. 竖直简约型

虽然使用很少,但竖直简约型表格经常用于分类或比较对象的描述,每一列代表的一个实体。我们可以在竖直简约型表格列之间加入空格来进行分隔。

 

 

 

最好加上大数值的 border-leftborder-right ,使用相同的颜色作为背景色。如果你愿意可以使用透明边框,但是IE6会把表格弄的面目全非。因为竖直简约型表格中,数据被从上到下(竖直)阅读的,所以添加 tr:hover 毫无用处,反而会使表格更难以理解。当然可以使用基于 JavaScript 解决方案,当鼠标移动到某列时,使其高亮显示,但是这超出了本文讨论的范围。

重点
仔细调整单元格之间的填充距离, 不要添加 tr:hover
有点
很简单的设计,对于简单的表格很合适
缺点
如果背景色不是色块型的,不要使用竖直简约型表格,它仅仅适合一部分 Table

3. 方块型

所有表格风格中最常用的,方块风格适用于各种类型的表格,挑选出一个好的颜色方案,分配给所有单元格的 background-color 。别忘了定义 border 来区分各个单元格。下面是方块型表格的例子:

 

 

 

 

 

 

这种风格,可能是目前最常用的方式。最难的问题实际上是找到与你的网站匹配的配色方案。如果你的网站上的图像比较深沉,使用这种方式将比较困难。

重点
挑选与网站适合的色彩
优点
容易设计,数据多和数据少的表格都适合
缺点
挑选完美的色彩会很困难

4. 水平间隔型

水平间隔型表格具有很强的吸引力和使用性。当阅读表格时,交替的背景色会使人感到很舒服。在设计水平间隔型表格时,只要简单地给每奇数行 tr 定义 class="odd"

Html代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=%09...%0A%20%0A%09%09%3Ctr%20class%3D%22odd%22%3E%0A%09%09%20%20%20%3Ctd%3E...%3C%2Ftd%3E%0A%09%09%20%20%20...%0A%09%09%3C%2Ftr%3E%0A%20%0A%09%09%3Ctr%3E%0A%09%09%20%20%20%3Ctd%3E...%3C%2Ftd%3E%0A%09%09%20%20%20...%0A%09%09%3C%2Ftr%3E%0A%20%0A%09..." quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. ...  
  2.   
  3.     < tr   class = "odd" >   
  4.        < td > ... </ td >   
  5.        ...  
  6.     </ tr >   
  7.   
  8.     < tr >   
  9.        < td > ... </ td >   
  10.        ...  
  11.     </ tr >   
  12.   
  13. ...  
	...
 
		<tr class="odd">
		   <td>...</td>
		   ...
		</tr>
 
		<tr>
		   <td>...</td>
		   ...
		</tr>
 
	...
 

 

 

重点
千万别用太多的间隔色,会把用户眼睛弄得很不舒服
优点
间隔模式会帮助用户更容易的阅读表格数据
缺点
给很大的表格添加 class="odd" 是件很乏味的事情,在大多数情况下,你必须手工完成它。

5. 竖直间隔型

竖直间隔比水平间隔更容易定义,因为我们可以使用 colgroupcol 这两个元素属性来定义不同列的 CSS 。但是代码与其他类型比起来,有点复杂了:

colgroup 元素适用于定义表格的 CSS ,我们可以使用它来代替给每个 td 或者 th 添加 class

 

Xml代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=%3Ctable%3E%0A%20%0A%20%20%20%20%3C!--%20Colgroup%20--%3E%0A%09%20%20%20%3Ccolgroup%3E%0A%09%20%20%20%20%20%20%3Ccol%20class%3D%22vzebra-odd%22%3E%0A%09%20%20%20%20%20%20%3Ccol%20class%3D%22vzebra-even%22%3E%0A%09%20%20%20%20%20%20%3Ccol%20class%3D%22vzebra-odd%22%3E%0A%09%20%20%20%20%20%20%3Ccol%20class%3D%22vzebra-even%22%3E%0A%09%20%20%20%3C%2Fcolgroup%3E%0A%20%0A%20%20%20%20%3C!--%20Table%20header%20--%3E%0A%09%20%20%20%3Cthead%3E%0A%09%20%20%20%20%20%20%3Ctr%3E%0A%09%20%20%20%20%20%20%20%20%20%3Cth%20scope%3D%22col%22%20id%3D%22vzebra-comedy%22%3EEmployee%3C%2Fth%3E%0A%09%20%20%20%20%20%20%20%20%20...%0A%09%20%20%20%20%20%20%3C%2Ftr%3E%0A%09%20%20%20%3C%2Fthead%3E%0A%09%20%20%20...%0A%3C%2Ftable%3E" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. < table >   
  2.    
  3.     <!-- Colgroup -->   
  4.        < colgroup >   
  5.           < col   class = "vzebra-odd" >   
  6.           < col   class = "vzebra-even" >   
  7.           < col   class = "vzebra-odd" >   
  8.           < col   class = "vzebra-even" >   
  9.        </ colgroup >   
  10.    
  11.     <!-- Table header -->   
  12.        < thead >   
  13.           < tr >   
  14.              < th   scope = "col"   id = "vzebra-comedy" > Employee </ th >   
  15.              ...  
  16.           </ tr >   
  17.        </ thead >   
  18.        ...  
  19. </ table >   
<table>
 
    <!-- Colgroup -->
	   <colgroup>
	      <col class="vzebra-odd">
	      <col class="vzebra-even">
	      <col class="vzebra-odd">
	      <col class="vzebra-even">
	   </colgroup>
 
    <!-- Table header -->
	   <thead>
	      <tr>
	         <th scope="col" id="vzebra-comedy">Employee</th>
	         ...
	      </tr>
	   </thead>
	   ...
</table>

 

 

 

 

 

虽然竖直间隔型可能更适合面向竖直表格,但是其他类型表格也可以采用这种风格。

重点
千万别用太多的间隔色,会把用户眼睛弄得很不舒服
优点
适合所有类型表格
缺点
选择色彩方案会很困难,想要添加 colgroup 元素

6. 重点列型

在某些表格中,有些列比其他列更加重要,在这种情况下,可以使用 colgroupcol 来标注重点列。在下面的例子中,首列被标示为重点列,使其更容易被关注。

 

 

 

你可以使用一个重点列来标示重点,比如说一个会计表格中的金额总计,或者一个比较表格中获胜的实体。

重点
要注意,不要过分强调重点性,这样会分散其它列的阅读
优点
对某些特定类型的表格特别有效
缺点
因为 tr:hover 在 IE 下无效,所以这种类型只适用于特定类型的表格

7. 报纸型

要达到所谓的报纸型的效果,需要给表格添加边框,而在边框内部展示内容。一个简约的报纸型表格如下所示:

 

 

 

变换单元格((td and th ))色彩,边框,边距,背景色和 tr:hover 效果后,其它风格的报纸型表格如下所示:

 

 

 

 

 

重点
注意 border-collapse ,不要丢失表格的外部边框
优点
给表格赋予了一种很有权威的风格
缺点
对于较大的表不适合(会失去它的魅力)

8. 圆角型

圆角给人的感觉是很光滑很有现代感,很容易就可以把圆角应用到一个表格上,但是你需要为这些圆角创建图像。理论上,在不需要额外的标记就可以给 trtd 添加圆角,但是IE6下,它会变得很一片混乱。所以最稳定的方法是把圆角图片置于表格的四个角。请参考下面的例子:

 

 

 

优点
如果你的网站大量使用圆角,而且你喜欢非传统风格的表格,这可能是你唯一的选择。/dd>
缺点
花费时间比较长,需要图片

9.背景图片型

如果你想很快且有特色的定义表格的风格,那么就简单的挑选出一个有吸引力的图片作为表格的背景。你也可以使用50%的灰度来定义单元格的背景图片,来提高可读性。你可以使用下面的 CSS -hack 技术是它能够在IE6下正常工作。

 

 

Html代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://www.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=*%20html%20table%20tbody%20td%0A%7B%0A%20%0A%09%09%20%20%2F*%20IE%20CSS%20Filter%20Hack%20goes%20here*%2F%0A%20%0A%7D" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
  1. * html table tbody td  
  2. {  
  3.    
  4.           /* IE CSS Filter Hack goes here*/  
  5.    
  6. }  
* html table tbody td
{
 
		  /* IE CSS Filter Hack goes here*/
 
}
 

表格例子如下:

 

 

重点
确定背景图片符合表格的内容
优点
很容易的定制,提供了独特的外观,如果正确使用,该图像可以作为一个符号,让用户留下难忘的印象
缺点
在IE6下需要 CSS -hack,需要提供图片

10. 单元格背景色型

你可以给单元格添加背景图片,实现一致的风格。这样你至少要花费半个小时才能得到你想要的东西,打开 Photoshop,生成一个像素大小的渐变图片,把它们设置为单元格的背景图片,这样你就得到了一个渐变效果的表格。

 

 

 

同样,选择一个模式,并将其设置为背景图片,可以得到一个模式风格的表格:

 

 

 

 

 

 

分享到:
评论

相关推荐

    Ext JS的table设计实例

    在"Ext JS的table设计实例"中,我们主要关注的是如何利用Ext JS来设计功能丰富的表格组件,包括表格的可编辑性、可排序性以及如何从XML数据源中读取并显示数据。 首先,Ext JS中的表格组件(`Ext.grid.Panel`或现代...

    最简单的rdlc报表模板

    总的来说,这个“最简单的rdlc报表模板”提供了一个快速启动RDLC报表开发的工具,让开发者能够更高效地创建和定制报表,而无需通过复杂的数据集生成过程。结合提供的代码示例,开发者可以轻松地将报表集成到ASP.NET...

    CodeSmith简单模板.rar

    在这个名为"CodeSmith简单模板.rar"的压缩包中,包含了用于创建三层架构(表现层、业务逻辑层、数据访问层)的模板文件。 首先,我们来看看`DBHelper.cs`。这个文件通常代表数据库帮助类,它是数据访问层(DAL,...

    免费开源现代化、响应式 HTML 模板 tabler.docx

    - **npm 安装**:通过 npm 安装是最简单的方式之一。 ```sh npm install --save @tabler/core ``` - **使用 jsDelivr CDN 库**:对于那些不希望将依赖项添加到项目中的开发者来说,使用 CDN 是一个很好的选择。 ...

    bootstrap简单模板

    总之,这个“bootstrap简单模板”压缩包是一个很好的起点,可以帮助初学者快速理解Bootstrap的基本用法,并在此基础上构建自己的网页设计。通过不断学习和实践,开发者可以掌握Bootstrap的精髓,轻松创建出美观、...

    tabler:Tabler是免费的,基于Bootstrap的开源HTML Dashboard UI Kit

    唯一的要求是基本HTML和CSS(以及一些 )知识-作为奖励,您将能够以最简单的方式来管理和可视化不同类型的数据! 响应式:有了对移动,平板电脑和台式机显示器的支持,无论您使用哪种设备都无所谓。 Tabler在所有...

    Android 点按钮添加TableRow源码.zip

    在Android开发中,"点按钮添加TableRow源码"是一个典型的用户界面操作,它涉及到布局管理、事件监听以及动态创建UI元素。...这个简单的小程序是理解Android布局管理和事件处理机制的一个实用起点。

    前端项目-angular-smart-table.zip

    "Angular Smart Table"是一个专为AngularJS框架设计的表格组件,用于在前端项目中实现功能丰富的数据展示。这个开源库提供了强大的数据管理功能,如排序、筛选、行选择和分页,让开发者能够以声明式的方式轻松构建...

    Laravel开发-laravel-table-view

    这个开源软件包专为Laravel 5设计,旨在帮助开发者轻松创建带有内置搜索和排序功能的表格视图,从而提高Web应用的用户体验。我们将讨论其核心功能、安装过程、使用方法以及如何自定义和扩展其功能。 `laravel-table...

    jq22Table169520161114.zip

    最后,Table.js允许开发者自定义样式,以满足不同项目的设计需求。你可以通过CSS或Bootstrap类来改变表格的外观,甚至可以使用模板引擎来生成复杂结构的表格单元格。 总结起来,jQuery表格生成插件Table.js是一款...

    Bootstrap网站模板

    模板中可能还包括了表格(Table)、媒体对象(Media Object)、进度条(Progress Bar)、徽章(Badge)等元素,它们都是Bootstrap提供的一系列实用组件,能帮助你快速构建功能丰富的网页。 JavaScript插件是...

    后台模板.rar

    Bootstrap作为目前最流行且被广泛使用的前端框架之一,以其强大的栅格系统、预定义的组件和丰富的JavaScript插件,使得网页设计和开发变得更加便捷。 这款模板采用了响应式设计,意味着无论用户是在桌面、平板还是...

    Python库 | Flask-Table-0.2.4.tar.gz

    4. **易于扩展**:由于Flask-Table的设计相对简单,开发者可以轻松扩展其功能,满足特定项目的需求。 **总结** Flask-Table作为Flask框架的扩展,旨在解决Web应用中数据展示的问题,提供了一种高效、灵活的方式来...

    Bootstrap万能模板

    "Bootstrap万能模板"是这个框架的一个全面集合,包含各种预设的表单、表格(table)和按钮设计,帮助开发者快速搭建功能完备的后台管理界面。 在Bootstrap中,表单是数据输入的关键部分。Bootstrap提供了预定义的...

    欧美简单风格彩色铅笔ppt模板.pptx

    【标题】:“欧美简单风格彩色铅笔ppt模板.pptx”是基于技术主题的一个演示文稿设计资源,它采用了一种清新、简洁的欧美风格,结合了彩色铅笔的元素,为用户提供了创建专业且富有创意的PPT的工具。 【内容详解】 1...

    制作一个简单HTML公司官网网页设计(HTML+CSS)

    该作业的主要目标是设计与制作一个简单的HTML公司官方网站。这样的网站适用于多种场景,包括但不限于企业介绍、产品展示和服务说明等。根据题目描述,我们可以了解到这个项目是面向学生的,旨在通过实际操作帮助他们...

    本科毕业论文LaTeX模板,latex论文模板,Latex

    本压缩包提供了一个专为本科毕业论文设计的LaTeX模板,它可以帮助学生们轻松地完成论文的格式设定,确保论文的规范性和专业性。 首先,让我们详细了解LaTeX。LaTeX是一种基于TeX的文字处理系统,由Leslie Lamport在...

    Aspose.Words for NET根据word模板创建文档Demo源码

    模板文件通常是一个预先设计好的Word文档,包含了固定的文本、样式、布局和占位符。在Aspose.Words中,我们可以识别并替换这些占位符,从而自动生成新的文档。模板中的占位符可以是特殊标记或者预定义的字段,例如`...

    bootstrap动态表格模板

    综上所述,Bootstrap动态表格模板是一个集成了筛选、分页和排序功能的高效工具,它利用Bootstrap的表格组件和JavaScript功能,提供了强大的数据展示和交互能力。在实际开发中,开发者可以依据这个模板,结合自身项目...

Global site tag (gtag.js) - Google Analytics