CSS / JS将<td>作为条形图进行着色?

I would like to use a <td> cell to visually "graph" a percent that's in the cell next to it. I will be bringing in the percent and want to shade it like a bar for a graph. Has anyone tried to do that and would it be easier to do it with CSS or JS function? I am using a html/php combo on the page.

Here's a simple sample of how it could be done. It's really just a matter of basic CSS:

http://jsfiddle.net/e5wRA/1/

Updating the Bar

Javascript (jQuery):

var percent = 20;

$('.bar').css({
    width: percent.toString() + '%'
});

PHP:

<tr>
    <td><?php echo $percent; ?>%</td>
    <td class="graph"><div class="bar" style="width:<?php echo $percent; ?>%"></div></td>
</tr>

In general, it’s a good idea to use CSS classes to style elements. Then use Javascript to change the class name as needed. This method allows you to separate presentation (CSS) from behavior (javascript).