hi,

ich muss für ein Projekt ein Balkendiagramm in HTML darstellen.

Der HTML-Code wird von einer Serverseitigen Sprache erzeugt.

ich verwende derzeit (stark vereinfacht natürlich, im Orginal mit einigem an CSS, "sauber" unsw.)

<div class="diagramm">

<table>

<tr>

<td width="150">Skala</td>

<td><div height=123>balken 1</div></td>

<td><div height=234>balken 2</div></td>

<td><div height=432>balken 3</div></td>

<tr>

</table>

</div>

unsw. Jetzt habe ich noch die erweiterung, das jeder X-Wert aus mehrern Balken bestehen kann (jeder balken in eigener farbe) und keine bessere Methode gefunden als:

<div class="diagramm">

<table>

<tr>

<td width="150">Skala</td>

<td>

<table><tr>

<td<div height=123>roter Balken 1</div></td>

<td><div height=234>blauer balken 1</div></td>

<td><div height=432>gelber balken 1</div></td>

</tr></table>

</td>

<td>

<table><tr>

<td<div height=122>roter Balken 2</div></td>

<td><div height=235>blauer balken 2</div></td>

<td><div height=400>gelber balken 4</div></td>

</tr></table>

</td>

....

<tr>

</table>

</div>

Nun, kennt ihr andere Methoden es zu machen ?

das mit den verschachtelten tabellen...naja.....

Muss unter IE und Firefox fehlerfrei laufen (XHTML 1)

ich darf keinerlei Module, Scripte oder sonstirgendwas aus dem netz dazu installieren.

Hi!

Mal abgesehen davon, dass Dein Markup ein paar Fehler enthält: Eric Meyer hat das mal gezeigt, und zwar hier: http://www.meyerweb.com/eric/css/edge/bargraph/demo.html

Grüße, Tobias

der HTML-Code oben ist nur ein schnell getipseltes beispiel.

Ich hab mir den Link mal angesehen, leider funktioniert das nur, weil dort position: absolute; verwendet wird. Nehme ich das raus, kommt es zu recht amüsanten darstellungen.

im Firefox (1.0) scheint es dann auch fehlerhafte darstellungen zu geben. Werde das nachher mal mit 1.5 testen.

Dennoch, leider kann ich die X-Koordinaten nicht immer absolut ermitteln.

Die Idee es mit Listen zu machen finde ich gut...aber es gibt - soweit ich gesucht habe - keine vernünftige möglichkeit, listenelemente nebeneinander darzustellen.

display: table / display: table-cell wäre eine Lösung, funktioniert aber mit Internet-Explorer nicht.

andere möglichkeiten / beispiele ?