Bargraph as a CSS styled and JS counted table

Inspirated by article at Khmerang.com.

This version does not use images and height of graph columns is automaticly counted by javascript.

CSS Code:

body {
        background:#eee;
        color:#333;
}
a {
        color:#666;
}
a:hover {
        color:#000;
}
table {
        border-collapse:collapse;
        width:49em;
        font:.6em/2em Arial;
}
td {
        padding:0;
        margin:0;
        vertical-align:bottom;
        text-align:center;
        background:#eee;
}
th {
        background:#cdc;
        border-bottom:.1em solid #666;
}
span {
        display:block;
        border-right:.1em solid #666;
        border-top:.1em solid #ccc;
        border-left:.1em solid #fff;
        background:#cdc;
        width:4em;
        padding:0;
        margin:0 .2em;
}

JS Code

If you dont like javascript and want just use a css code you can uncomment line with span.innerHTML and script will help you to count, value of each span height.

function AutoBarGraph(){
var tr=document.getElementById('graph')
var td=tr.getElementsByTagName('td');
for(var i=0;i<td.length;i++){
span=document.createElement('span')
valHeight=parseFloat(td[i].childNodes[0].nodeValue)/6000;
setTitle=td[i].childNodes[0].nodeValue;
span.setAttribute('title',setTitle);
//span.innerHTML='style=\"width:'+Math.round((setTitle/6000)*100)/100+'em\"';
span.style.height=valHeight+'em';
td[i].appendChild(span)
}}
if(document.childNodes){window.onload=AutoBarGraph};

Example:

Test it on working example.

Tested in Firefox 0.7+, IE 5+, Opera 7.23+

Use script and style as you want.