- 浏览: 829192 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (530)
- Java编程 (64)
- C/C++/D (6)
- .Net/C# (9)
- Ruby (12)
- JavaScript (77)
- XML (1)
- JSON (1)
- Ajax (17)
- ExtJs (81)
- YUI (1)
- JQuery (7)
- DWR (1)
- HTML (7)
- CSS (7)
- Database (6)
- PowerDesigner (23)
- DB2 (2)
- Oracle (57)
- MS SQL Server (8)
- MySQL (6)
- JSP/Servlet/JSTL/TagLib (3)
- Spring (1)
- Hibernate (0)
- iText (0)
- Struts (0)
- Struts2 (0)
- iReport (0)
- FreeMarker (0)
- HttpClient (1)
- POI (6)
- FckEditor (15)
- Eclipse / MyEclipse (10)
- IntelliJ IDEA (0)
- NetBeans (0)
- Tomcat (11)
- WebLogic (1)
- Jboss (3)
- jetty (4)
- IIS (2)
- CVS/VSS (1)
- FTP (1)
- Windows/DOS (6)
- Linux/Unix (0)
- 软件建模 UML (0)
- Design Pattern & Thinking In Programming (10)
- 数据结构与算法 (12)
- 软件项目管理 (9)
- 行业应用解决方案 (3)
- 电脑软件与故障解决 (13)
- 编程语言 (1)
- 十万个为什么 (3)
- JBPM (2)
- sysbase (2)
- JDBC (8)
- Ant (2)
- Case-计算机辅助软件工程 (1)
- WebService (4)
- 浏览器 (1)
最新评论
-
gaoqiangjava:
同一楼,还请大手帮解决
JAVA读取word文件 -
hyl523:
// 判断数组中的第一个值是否未定义,如果未定义,便定义为空对 ...
javascript面向对象之二 命名空间 -
ping12132200:
ping12132200 写道我抱着个错不是因为:body标签 ...
extjs在IE报对象不支持此属性或方法 -
ping12132200:
我抱着个错不是因为:body标签内的第一个元素不能为文本tex ...
extjs在IE报对象不支持此属性或方法 -
fireinjava:
呀,不错,转走了,谢谢啦~
利用OpenOffice将word转换成PDF
表格恐怕是 Web 设计中最困难的一个对象了,感谢神秘的标记语言,有太多的细节我们需要关注了,而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素,但是它浪费了我们大量的时间。有人甚至说,标签是垃圾。其实表格本身并没有什么,是你自己使用的不当,把简单的事情弄的复杂了。这就是我写下本篇文章的原因,它将向你展示十个最简单表格设计方法。
准备
想必大家都知道 xhtml 1.0 strict 标准,下面是一个符合 xhtml 1.0 strict 标准的例子。
- <!-- 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 >
<!-- 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>
在我们开始之前,温习一下所谓的使用表格的规则:
-
表格的宽度
根据内容,小心的设置表格的宽度,如果你不知道确切的宽度的话,设置成100%准没错。如果内容很多把表格撑的很大的时候,把表格的宽度设置的大一些肯定比小一些要好看的多。 -
给 td 加点 padding
虽然在表格中 td 的排列很整齐,但是这并不是说,我们要把它们排列地很紧凑,给它们点间距,这样看起来就不那么难以阅读了。 -
表格就是文字
阅读表格与阅读文字是很类似的,而且会花费更多的时间去理解表格。所以当表格中有金额的时候,注意它的对比度。使用柔和的颜色,使之看起来更舒服一些。总之,要使表格的风格更容易阅读,而不是相反。
好,下面我们开始进入正题。
1. 水平简约型
所谓水平表格,顾名思义,就是水平地去看表格而不是竖直地看,它每一行都代表一个实体。你可以给这种表格设置最简约的风格:简单地给单元格(td
and th
)设置足够的 padding
,在表头下设置2个像素的边框。
因为水平表格是被每行每行的阅读,所以清楚的行边界会起到事半功倍的效果。如果没有行边界,而且行数很多的情况下,表格阅读起来是很困难的。所以下面的表格中,我给每个 td
下加了一个像素的下边界。
请注意 tr:hover
一个很有用的辅助人们阅读表格的方法。当鼠标停留在一个单元格上时,这个单元格所在的行就会被标亮。如果表格有很多列时候,这个方法会很容易的追踪到你关注的行。
tr:hover
在IE6下不能使用, 如果表格有很多的列,看起来会很混乱2. 竖直简约型
虽然使用很少,但竖直简约型表格经常用于分类或比较对象的描述,每一列代表的一个实体。我们可以在竖直简约型表格列之间加入空格来进行分隔。
最好加上大数值的 border-left
和 border-right
,使用相同的颜色作为背景色。如果你愿意可以使用透明边框,但是IE6会把表格弄的面目全非。因为竖直简约型表格中,数据被从上到下(竖直)阅读的,所以添加 tr:hover
毫无用处,反而会使表格更难以理解。当然可以使用基于 JavaScript 解决方案,当鼠标移动到某列时,使其高亮显示,但是这超出了本文讨论的范围。
tr:hover
3. 方块型
所有表格风格中最常用的,方块风格适用于各种类型的表格,挑选出一个好的颜色方案,分配给所有单元格的 background-color
。别忘了定义 border
来区分各个单元格。下面是方块型表格的例子:
这种风格,可能是目前最常用的方式。最难的问题实际上是找到与你的网站匹配的配色方案。如果你的网站上的图像比较深沉,使用这种方式将比较困难。
4. 水平间隔型
水平间隔型表格具有很强的吸引力和使用性。当阅读表格时,交替的背景色会使人感到很舒服。在设计水平间隔型表格时,只要简单地给每奇数行 tr
定义 class="odd"
。
- ...
- < tr class = "odd" >
- < td > ... </ td >
- ...
- </ tr >
- < tr >
- < td > ... </ td >
- ...
- </ tr >
- ...
... <tr class="odd"> <td>...</td> ... </tr> <tr> <td>...</td> ... </tr> ...
class="odd"
是件很乏味的事情,在大多数情况下,你必须手工完成它。5. 竖直间隔型
竖直间隔比水平间隔更容易定义,因为我们可以使用 colgroup
和 col
这两个元素属性来定义不同列的 CSS
。但是代码与其他类型比起来,有点复杂了:
colgroup
元素适用于定义表格的 CSS
,我们可以使用它来代替给每个 td
或者 th
添加 class
。
- < 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 >
<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. 重点列型
在某些表格中,有些列比其他列更加重要,在这种情况下,可以使用 colgroup
和 col
来标注重点列。在下面的例子中,首列被标示为重点列,使其更容易被关注。
你可以使用一个重点列来标示重点,比如说一个会计表格中的金额总计,或者一个比较表格中获胜的实体。
tr:hover
在 IE 下无效,所以这种类型只适用于特定类型的表格7. 报纸型
要达到所谓的报纸型的效果,需要给表格添加边框,而在边框内部展示内容。一个简约的报纸型表格如下所示:
变换单元格((td
and th
))色彩,边框,边距,背景色和 tr:hover
效果后,其它风格的报纸型表格如下所示:
border-collapse
,不要丢失表格的外部边框8. 圆角型
圆角给人的感觉是很光滑很有现代感,很容易就可以把圆角应用到一个表格上,但是你需要为这些圆角创建图像。理论上,在不需要额外的标记就可以给 tr
和 td
添加圆角,但是IE6下,它会变得很一片混乱。所以最稳定的方法是把圆角图片置于表格的四个角。请参考下面的例子:
9.背景图片型
如果你想很快且有特色的定义表格的风格,那么就简单的挑选出一个有吸引力的图片作为表格的背景。你也可以使用50%的灰度来定义单元格的背景图片,来提高可读性。你可以使用下面的 CSS -hack 技术是它能够在IE6下正常工作。
- * html table tbody td
- {
- /* IE CSS Filter Hack goes here*/
- }
* html table tbody td { /* IE CSS Filter Hack goes here*/ }
表格例子如下:
10. 单元格背景色型
你可以给单元格添加背景图片,实现一致的风格。这样你至少要花费半个小时才能得到你想要的东西,打开 Photoshop,生成一个像素大小的渐变图片,把它们设置为单元格的背景图片,这样你就得到了一个渐变效果的表格。
同样,选择一个模式,并将其设置为背景图片,可以得到一个模式风格的表格:
发表评论
-
HTML滤镜效果
2010-11-09 23:12 821<meta http-equiv="X-UA- ... -
html模板
2010-07-08 23:15 1090<%@ page language="java ... -
css制作有立体效果的表格
2010-06-30 17:09 762<style> .aa {margin:100p ... -
到底什么是WEB标准?
2010-06-04 15:37 800我们天天都在说WEB标准,那到底什么是WEB标准?从以下3 ... -
table style border
2010-01-13 22:42 1048<table width="100%" ... -
可能导致跨站脚本攻击的HTML标签
2010-01-13 22:41 1284根据微软提供的建议,我们要慎重允许下列HTML标签,因为这些H ...
相关推荐
唯一的要求是基本HTML和CSS(以及一些 )知识-作为奖励,您将能够以最简单的方式来管理和可视化不同类型的数据! 响应式:有了对移动,平板电脑和台式机显示器的支持,无论您使用哪种设备都无所谓。 Tabler在所有...
具有单选,复选框,排序,分页,扩展和其他附加功能的扩展Bootstrap表。 首先,请查看: 执照 注意: Bootstrap Table已获得。 完全免费,您可以随意使用和修改... 您还可以通过“加载示例”按钮使用我们的示例模板:
设计模式之 Template(模板方法) 实际上向你介绍了为什么要使用 Java 抽象类,该模式原理简单,使用很普遍. 设计模式之 Strategy(策略) 不同算法各自封装,用户端可随意挑选需要的算法. 设计模式之 Chain of ...
简单实用的DataSet更新数据库的类+总结 [ADO.NET]由数据库触发器引发的问题 为ASP.NET封装的SQL数据库访问类 DataTable.Select方法的性能问题 .NET 2.0里使用强类型数据创建多层应用 ADO.NET实用经验无保留曝光 有了...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...
2个目标文件 摘要:Java源码,文件操作,TCP,服务器 Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。...
Shockwave Flash 3-4 这是一个专为Flash4设计的Dreamweaver插件,由于播放由Flash4 制 作需要系统安装flash player4所以这个插件在向HTML文件中插入flash4 动画时可以由用户指定是3.0版还是4.0版,如果浏览者的系统...
一个最主要的问题就是O/R mapping它需要假设数据库是被恰当的规范化了,如果没有被恰当规范,这就会给映射带来许多麻烦,甚至需要绕些弯路,或者在设计时对效率做些折衷。同时,没有哪一个对象/关系解决方案可以支持...
用户完全可以自行设计模板,从而更好的体现用户的个性和特色。 5、上传文件清理大大节约空间资源:系统后台可以根据管理员操作的项目来清理无效、过期的文件,从而大大节约了空间,节约了成本。 6、支持无限级栏目...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...
Tcp服务端与客户端的JAVA实例源代码,一个简单的Java TCP服务器端程序,别外还有一个客户端的程序,两者互相配合可以开发出超多的网络程序,这是最基础的部分。 递归遍历矩阵 1个目标文件,简单! 多人聊天室 3...
本网站以网络交友为主,为广大用户提供一个借助网络进行人际交往的平台,也是网络与现实最贴近的实用型平台。本文所介绍的网络聊天系统是基于开放的web服务器应用程序开发设计的,其主要特性是能动态完成信息的传递,...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...
它的设计初衷就是为了提高数据库连接池的性能,根据某些测试数据发现,BoneCP是最快的连接池。BoneCP很小,只有四十几K(运行时需要slf4j和guava的支持,这二者加起来就不小了),而相比之下 C3P0 要六百多K。 异步...