用CSS实现柱状图(Bar Graph)的方法(四)—table实现复杂柱状图
作者:dudo 来源:dudo博客 发布时间:2008-05-28 12:55:00
前面的文章,主要讲到如何使用无序列表ul元素来实现复杂柱状图,但是在Web标准中,除了注重表现外,更加注重语意,所谓的语意就是样式和内容的相关程序。
在前面举到例子中,要实现销售记录一览,使用ul或者dd dt dl虽然可以实现想要的效果,但是如果不过表现,只看HTML代码的话,很明显,这堆代码基本上语意比较差,或者说单看HTML代码看不出你想要表达什么样的效果。在Web标准中,列举数据元素时,最好使用table元素来实现,这才是table的用武之地。在这一节里,我们就尝试使用table来实现复杂的柱状图效果。不过已经有人早就尝试过这个试验了(CSS Vertical Bar Graphs),为了和本节形成比照,前面的例子也是按照这个效果制作的。
首先来看一下运行的效果图:
在技术上来说,如果我们去除各个标签的本来含义,只把它们看作是XHTML中的普通元素的话,我们会发现其实无论使用什么标签,在实际操作上都差不多。我们之所以选择不同的标签是因为在表达上的需要,但从技术上说,它们只是普通元素。
本文还是以前面文章设计的案例来讲,在阅读本文前,请先查看前面的这篇文章,以免造成理解困难。接下来我们就看看如何一步一步实现这样一个效果。
一、首先打地基——构建HTML代码
这个很简单,就是做一个XHTML中table标签就可以了:
<table id="q-graph" cellpadding="0" cellspacing="0">
<caption>某公司2007年1~4季度南北区域销售情况对照表(单位:万件)</caption>
<thead>
<tr>
<th></th>
<th class="north">北方</th>
<th class="south">南方</th>
</tr>
</thead>
<tbody>
<tr id="q1">
<th scope="row">Q1</th>
<td class="north bar" style="height:111px">18</td>
<td class="south bar" style="height:99px">16</td>
</tr>
<tr id="q2">
<th scope="row">Q2</th>
<td class="north bar" style="height:198px">32</td>
<td class="south bar" style="height:210px">34</td>
</tr>
<tr id="q3">
<th scope="row">Q3</th>
<td class="north bar" style="height:260px">43</td>
<td class="south bar" style="height:198px">32</td>
</tr>
<tr id="q4">
<th scope="row">Q4</th>
<td class="north bar" style="height:111px">18</td>
<td class="south bar" style="height:198px">32</td>
</tr>
</tbody>
</table>
在这段代码没有什么特别之处,只不过注意一下scope="row",一般情况下,表头应该使用<th>来指明,不过当<th>既是表头又是表格数据的时候,就要使用scope加以说明 。scope属性通常可以连接表格数据单元格和表头,它有四个属性值row、col、rowgroup、colgroup分别代表定义行表头、列表头、行组的表头和列组的表头。
猜你喜欢
- 有时候我们在设计表单的时候不希望用户输入其它字符,只想他在input中输入数字,那么我们就可以使用下面的代码,当然这个比较是客户
- 简介这是一篇介绍网页设计原则的文章。在互联网迅速发展的今天,各种web 2.0网站竞争激烈,你死我亡。Jini, D
- 表单在提交前我们通常会用客户端JS对其内容进行验证,通常都是写一个函数然后在onsumbit事件中调用,如下:<html><
- 或许你也经历过,很多人都说一个女人很漂亮,而你觉得很一般。有时候,我也尝试理解为什么会对某个女人情有独钟。通常,我用迷人来描述,但这个&qu
- 看到有人用的PJBlog使用的是自动填写验证码,这样其实也不使用验证码基本上没有什么区别,很容易被 * ,因此在参照许多修改的基础上,找到
- 微软今天发布了SQL Server 2005 SP3的正式版,而这也将是该软件的最后一次升级服务,不过暂时只有英文版本,需要简体中文版的用户
- 我看blog里,还有很多地方都引用过我写的这个类,转了不少,但自己一直也没发表过,这次正式发表一下。在蓝色理想中有人不懂怎么用,我在baid
- 在做视觉设计时,如何高效地使用图标是一门学问:该使用什么样的图标?图标该放在哪里?大小如何?图标的使用是否帮助用户更好更快的理解内容,亦或是
- l当今世界,技术发展迅猛,不论是什么行业,大多数关键数据都是放置于数据库中进行管理的,一来目前数据库技术已经相当成熟,二来其管理功能非常强大
- 代码如下:Dim strName, iLoop For Each strName 
- 我们用session来实现这一设想。由于session是用户级的全局变量,将登录的信息记录到session中后,用户就可直接浏览这些特定的页
- 当点了链接后,跳出的网页地址是https://www.aspxhome.com/ 或https://www.cidianwang.
- 一个不错的网页拾色器也叫调色版,请看截图:当想要更多颜色时点击“其它颜色...”此时将调用系统自带的那个颜色选择框:注意:只有把〈scrip
- 在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于"可视化"和操作简便,使用的朋友依然很多,今天罗列一
- 在修改后的 《闲谈 Web 图片服务器》 一文中也提及了"IE 浏览器的连接数问题",这也是个有趣的话题。值得补充记录一
- 费茨法则是人机交互领域里一个非常重要的法则,在10年来得到了广泛的应用。Fitts法则最基本的观点就是任何时候,当一个人用鼠标来移动鼠标指针
- 通常人们使用以下两种方法来执行SQL语句: Set Rs=Conn.Execute(SqlStr) 和&nbs
- 使用Northwind 数据库首先查询Employees表查询结果:city列里面只有5个城市使用ROW_NUMBER() OVER(PAR
- 使用ASP实现网站的目录树数据库结构(共使用了两个表)1。tblCategory字段名 类型 Root&
- 1、存储过程基本语法: create procedure sp_name() begin ...... end; 2、如何调用: call