用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分别代表定义行表头、列表头、行组的表头和列组的表头。


猜你喜欢
- 1>保存为二进制文件,pkl格式import picklepickle.dump(data,open('file_path
- 通常我们做网站,设计版面布局是第一步,如何做到版面布局具有创意又美观大方呢?这就需要一定的版面处理功底。让我们先来了解一下版面布局的步骤:一
- 工欲善其事,必先利其器。作为更专业的前端工程师,我们需要强劲的IDE协助我们写出规范、美观、漂亮的JavaScript代码,首先要作的就是对
- 本文实例讲述了Python通用循环的构造方法。分享给大家供大家参考,具体如下:1.交互循环是无限循环的一种,允许用户通过交互的方式程序的特定
- 我就废话不多说了,大家还是直接看代码吧~<template><uploader :options="option
- select UNIX_TIMESTAMP(ADDDATE(NOW(),INTERVAL -60 DAY))首先根据now()获得当前时间使
- 类的私有属性和方法Python是个开放的语言,默认情况下所有的属性和方法都是公开的 或者叫公有方法,不像C++和 Java中有明确的publ
- <form id="myForm" method="post">
- 介绍:UUID是128位的全局唯一标识符,通常由32字节的字符串表示。使用:import uuid print uuid.uuid1()14
- python模块中的__all__属性,可用于模块导入时限制,如:from module import *此时被导入模块若定义了__all_
- 前言本文用Python实例阐述了一些关于进程、线程和协程的概念,由于水平有限,难免出现错漏,敬请批评改正。前提条件熟悉Python基本语法熟
- 这个任务是自己在项目中数据处理的一部分内容,待处理的图片如下所示:我需要将目标区域给裁剪出来,要不然在后期训练网络的时候整幅图像过大,且目标
- Mysql 删除重复数据保留一条有效数据一、Mysql 删除重复数据,保留一条有效数据DELETE FROM SZ_Building WHE
- 题记JS中的this指向一直是个让初学者头疼的问题。今天,我们就一起来瞅瞅this倒地是咋回事,详细说说this指向原则,从此不再为了thi
- 初级的图像拼接为将两幅图像简单的粘贴在一起,仅仅是图像几何空间的转移与合成,与图像内容无关。高级图像拼接也叫作基于特征匹配的图像拼接,拼接时
- 这篇文章主要介绍了Python Django 封装分页成通用的模块详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学
- 本文实例讲述了决策树的python实现方法。分享给大家供大家参考。具体实现方法如下:决策树算法优缺点:优点:计算复杂度不高,输出结果易于理解
- 前言使用python做一个加密资料的软件,可加密应用程序、文件、压缩包等多种文件格式,不可直接加密文件夹,可以先用压缩包打包在加密。加密后的
- L2正则化原理:过拟合的原理:在loss下降,进行拟合的过程中(斜线),不同的batch数据样本造成红色曲线的波动大,图中低点也就是过拟合,
- 1. dbm UNIX键-值数据库dbm是面向DBM数据库的一个前端,DBM数据库使用简单的字符串值作为键来访问包含字符串的记录。dbm使用