How could you implement something like Excel 2007's databars in HTML/CSS/JS?

Answer 1

A javascript-based solution like this cross-browser gradient might be a good start.

With some DHTML, you can make a bar with a given length.

Answer 2

I would use either the Grid component from Ext JS library or the DataTable component Yahoo's YUI library. The cross-browser compatibility, etc. work is done for you.

Answer 3

Make the bars as background images and position them to show values. eg. with a fixed column width of 100px:

<div style="background: url(bg.gif) -50px 0 no-repeat;">5</div>
<div style="background: url(bg.gif) -20px 0 no-repeat;">8</div>

If your columns have to be flexible size (not fixed, and not known at the time the page is produced), it's a bit trickier:

<style type="text/css">
    .cell { position: relative; }
    .cell .back { position: absolute; z-index: 1; background: url(bg.gif); }
    .cell .value { position: relative; z-index: 2; }
</style>

<div class="cell">
    <div class="back" style="width: 50%;">&nbsp;</div>
    <div class="value">5</div>
</div>
<div class="cell">
    <div class="back" style="width: 80%;">&nbsp;</div>
    <div class="value">8</div>
</div>