Easy Bar Graphs
Bar graphs can be a precise aid to quickly conveying quantitative information.
An easy way to publish bar graphs on web pages is to use tables. No graphic images are required.
The table has as many data cells as there are bars in the graph. Then inside each of those data cells is another table, this table being the exact size of the bar and having a background color.
Here is an example TABLE tag for the outside table:
<TABLE
border="0"
CELLPADDING="0"
CELLSPACING="5">
<TR><TD>
[bar goes here]
</TD></TR>
</TABLE>
The BORDER and CELLPADDING attributes would usually be "0".
The CELLSPACING attribute's value is the number of pixels of space you want between the bar graphs.
The bar table might be something like this:
<table width="88" height="7" bgcolor="red"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
The width attribute specifies the pixel width of the bar. Similarly, the height specifies the pixel height.
The bgcolor attribute specifies the bar color.
The border, cellpadding, and cellspacing attributes would normally be "0"
The table data cell of this bar table contains a non-break space. But this is the important part: The data cell's style specifies a 1 pixel font size and a 1 pixel line height. This is so the non-break space will require no more than 1 pixel of room and won't force the bar to be larger than you wanted it to be. You'll see the style attribute in the td tag of the bar table example, above.
Here is a complete example with four horizontal red bars of varying lengths on a yellow background (notice the addition of the BGCOLOR="yellow" attribute in the outside TABLE tag):
<TABLE
BGCOLOR="yellow"
border="0"
CELLPADDING="0"
CELLSPACING="5">
<TR><TD>
<table width="88" height="7" bgcolor="red"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR><TR><TD>
<table width="66" height="7" bgcolor="red"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR><TR><TD>
<table width="11" height="7" bgcolor="red"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR><TR><TD>
<table width="55" height="7" bgcolor="red"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR>
</TABLE>
If you prefer to have the base of the bars on the right, with the bars extending toward the left, an align="right" in the outside table's TD tags will accomplish that. Here is an example of that, with blue bars on a white background:
<TABLE
BGCOLOR="white"
border="0"
CELLPADDING="0"
CELLSPACING="5">
<TR><TD align="right">
<table width="88" height="7" bgcolor="blue"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR><TR><TD align="right">
<table width="66" height="7" bgcolor="blue"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR><TR><TD align="right">
<table width="11" height="7" bgcolor="blue"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR><TR><TD align="right">
<table width="55" height="7" bgcolor="blue"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR>
</TABLE>
To publish vertical bars instead of horizontal bars, put the outside table data cells side-by-side in columns instead of in rows. Here is an example of vertical yellow bars on a red background:
<TABLE
BGCOLOR="red"
border="0"
CELLPADDING="0"
CELLSPACING="5">
<TR><TD VALIGN="bottom">
<table width="7" height="88" bgcolor="yellow"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD><TD VALIGN="bottom">
<table width="7" height="66" bgcolor="yellow"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD><TD VALIGN="bottom">
<table width="7" height="11" bgcolor="yellow"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD><TD VALIGN="bottom">
<table width="7" height="55" bgcolor="yellow"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR>
</TABLE>
Notice that the outside table data cells contained a VALIGN="bottom" attribute. This keeps the base of the bars aligned at the bottom, with the bars extending upward.
If you prefer to have the base of the bars at the top, with the bars extending downward, a VALIGN="top" in the outside table's TD tags will accomplish that. Here is an example of that, with white bars on a blue background:
<TABLE
BGCOLOR="blue"
border="0"
CELLPADDING="0"
CELLSPACING="5">
<TR><TD VALIGN="top">
<table width="7" height="88" bgcolor="white"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD><TD VALIGN="top">
<table width="7" height="66" bgcolor="white"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD><TD VALIGN="top">
<table width="7" height="11" bgcolor="white"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD><TD VALIGN="top">
<table width="7" height="55" bgcolor="white"
border="0" cellpadding="0" cellspacing="0"><tr>
<td style="font-size: 1px; line-height: 1px;"> </td>
</tr></table>
</TD></TR>
</TABLE>
Using those four example as a base, you have the means to build professional-looking bar graphs for your web pages.
And it's so simple. The outside table has as many data cells as there are bars to print. The tables inside those data cells then print the bars.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
©2004 Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
