A Graph in Table Without Image

Here is a simple script to add a graph to a table cell.

Each table row consists of 2 cells. The first cell contains a numeric value. For each row, in the second cell, the script creates a span with a width equal to the value in the first cell:


It assumes you set a style for a "graph" class. Alternatively, you could set background color in the script. Also, the maximum span width of 100 is assumed.

A side note: to create a rounded span in Firefox, use the following style for the "graph" class:
-moz-border-radius: 10px;

var tbl = document.getElementById('tbl');
for(var i=0; i<tbl.rows.length; i++){
var val = tbl.rows[i].cells[0].innerHTML;
var span = document.createElement("span");
span.style.width = val/100*100;
span.className = "graph";
var cell =tbl.rows[i].cells[1];
cell.style.textAlign= 'left';
cell.appendChild(span);
}