Bar graph with help of <table> tag
Bar graphs are simple for implementation in all browser. Prepare acceptable picture e.g. bar.png first and then set its proportions by the help of CSS property in img tag. For vertical graph constant width is kept and height is set for each bar when HTML code is generated by server according to data from database. Each element of graph (single img) is placed into one <td> (table cell).
 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
On the left you see example of graph from application visual defects. Original code comes sometimes from 1966 year.
For needs of this article HTML original code was slightly modified. Some atributes were moved from <td> to the CSS, in order to shorten the code. Original code contained DHTML function for numerical values display when onmouseover. That is skipped here and will be described in some next article.
Part of code for scale drawing is skipped also because of keeping the code as simple as possible.
You will see, that it is possible to create simple and transparent HTML code for bar graph presentation with the help of tables. Here is HTML code listing.
<style type="text/css">
.tdg {width: 13px; height: 300px;}
.bar {width: 12px; border: 0;}
</style>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr valign="bottom">
<td class="tdg"><img class="bar" height="260px" src="bar.png" /></td>
<td class="tdg"><img class="bar" height="265px" src="bar.png" /></td>
...
</table>
</body>
In CSS section two classes are declared. Class tdg serves for table cell, important is dimmension height , which determinates graphic scale and no bar of graph should overcome this size. Class bar is used for drawing of bar picture. The width of bar element is lower than tdg element and so creates space between each bar. It is usefull when you want to draw the scale as a background picture.
In HTML part of code you find simple table. Important is correct setting vertical alignment defined in <tr>, which set the coordinate system so that all rendered bars of graph are sitting on bottom of table. Further you see sample of two table cells to the which server script inserted calculated heigh of bar (in red) as an atribute of img tag.
Black part of code is static, red part is calculated according to actual values from database and are unique for each bar. You must not forget to test the calculated height of bar so that not exceed the height defined in tdg class. Otherwise graph scale degenerate. In case of zero height of bar I recomend to replace <img> tag with hard space ( ). Do not forget correct DOCTYPE declaration, to switch IE browsers to the standard mode.
It becomes modish to refuse <table> at any case. For page layout I agree, but for tabular data or graph like here, there in no better tag.
Bar with zero height is rendered in a bit different way in separate browsers. FF and latest IE7 render picture of zero height <img height="0"..> as invisible. Opera and older version IE draw picture of height 1px even if you prescribe the height zero.
I rediscovered this reality when eperimenting with this type of graph and dynamic change the height of bars by help of AJAX. It explains my recommendation for hard space mentioned above.
updated 28.10.2006