Как вы могли бы реализовать что-то вроде панелей данных Excel 2007 в HTML / CSS / JS?

Решение на основе javascript, подобное этому кроссбраузерный градиент, могло бы стать хорошим началом.

С помощью некоторого DHTML вы можете создать штанга заданной длины.

Я бы использовал либо компонент Grid из библиотеки Внешний JS, либо компонент Таблица данных из библиотеки YUI Yahoo. Работа над кроссбраузерностью и т. д. Сделана за вас.

Сделайте полосы как фоновые изображения и расположите их так, чтобы отображать значения. например. с фиксированной шириной столбца 100 пикселей:

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

Если ваши столбцы должны иметь гибкий размер (не фиксированный и неизвестный на момент создания страницы), это немного сложнее:

<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>