Bu örnekle çeşitli istatistik bilgilerinizi bar-grafik ile gösterebilirsiniz.

Stil dosyanıza eklenecek kod:
.bargraph {
font: 0.6em/2em Arial;
color: #ddb;
border-collapse: collapse;
width: 476px;
}
.bargraph td {
padding:0;
margin:0;
vertical-align:bottom;
text-align:center;
background: #2d271c url(gridline.gif) 15px bottom;
}
.bargraph th {
background: #2d271c;
}
.bargraph img{
display:block;
border-right: 1px solid #000;
}Göstereceğiniz yere eklenecek kod:
<table class="bargraph">
<tr>
<th>Visits 2005</th>
<td>10000<img src="column.gif" width="36" height="10" alt="10000" /></td>
<td>15000<img src="column.gif" width="36" height="30" alt="15000" /></td>
<td>20000<img src="column.gif" width="36" height="40" alt="20000" /></td>
<td>30000<img src="column.gif" width="36" height="60" alt="30000" /></td>
<td>35000<img src="column.gif" width="36" height="70" alt="35000" /></td>
<td>40000<img src="column.gif" width="36" height="80" alt="40000" /></td>
<td>50000<img src="column.gif" width="36" height="100" alt="50000" /></td>
<td>60000<img src="column.gif" width="36" height="120" alt="60000" /></td>
<td>70000<img src="column.gif" width="36" height="140" alt="70000" /></td>
<td>80000<img src="column.gif" width="36" height="160" alt="80000" /></td>
<td>90000<img src="column.gif" width="36" height="180" alt="90000" /></td>
<td>100000<img src="column.gif" width="36" height="200" alt="100000" /></td>
</tr>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
</table>İndirmeniz gereken iki adet resim dosyası:
http://www.khmerang.com/csslab/bargraphs/column.gifhttp://www.khmerang.com/csslab/bargraphs/gridline.gifDemo için tıklayınKaynak için
tıklayın