Mittels einer 1 x 1 Pixel großen Grafik lassen sich einfache Balkendiagramme erstellen. Für horizontale Balken wird das <width>-Tag der Grafik entsprechend den darzustellenden Werten manipuliert:

<p>1. Quartal<br>
<img src="bar_blau.gif" width="200" height="10" border="0" alt=""> 200</p>

<p>2. Quartal<br>
<img src="bar_rot.gif" width="150" height="10" border="0" alt=""> 150</p>

<p>3. Quartal<br>
<img src="bar_gruen.gif" width="98" height="10" border="0" alt=""> 98</p>

<p>4. Quartal<br>
<img src="bar_gelb.gif" width="50" height="10" border="0" alt=""> 50</p>

1. Quartal
200 2. Quartal
150 3. Quartal
98 4. Quartal
50 Wenn Sie keine Farben benötigen, können Sie auch das <hr>-Tag benutzen. Hier besteht dann allerdings nicht die Möglichkeit, hinter der Linie den Wert anzugeben, da nach <hr> automatisch ein Zeilenumbruch gemacht wird.

<hr noshade width="200" align="left">

1. Quartal

---

2. Quartal

---

Für vertikale Balken wird statt des <width>-Tags das <height>-Tag entsprechend manipuliert:

<img src="bar_blau.gif" width="10" height="200" border="0" alt="">

<img src="bar_rot.gif" width="10" height="150" border="0" alt="">

<img src="bar_gruen.gif" width="10" height="98" border="0" alt="">

<img src="bar_gelb.gif" width="10" height="340" border="0" alt="">

Bei vertikalen Balken bietet sich zur besseren Darstellung eine Tabelle an (zur Verdeutlichung hier mit Rahmen):

200	150	98	50
1. Quartal	2. Quartal	3. Quartal	4. Quartal