Ce que je voudrais faire est de produire une version HTML/CSS/JS de ce qui suit. Le quadrillage et les autres aspects ne sont pas importants. C'est plus une question de savoir comment faire les bases de données en arrière-plan.Comment pourriez-vous implémenter quelque chose comme les bases de données d'Excel 2007 en HTML/CSS/JS?
alt text http://blogs.tech-recipes.com/shamanstears/files/2008/04/excel_databars2.png
Faites des barres comme images d'arrière-plan et positionnez-les pour afficher les valeurs. par exemple. avec une largeur de colonne fixe de 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>
Si vos colonnes doivent être de taille flexible (non fixe, et non connu au moment où la page est produit), il est un peu plus compliqué:
<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%;"> </div>
<div class="value">5</div>
</div>
<div class="cell">
<div class="back" style="width: 80%;"> </div>
<div class="value">8</div>
</div>
Une solution basée sur javascript comme ceci cross-browser gradient pourrait être un bon début. Avec un peu de DHTML, vous pouvez créer un bar with a given length.