Selasa, 23 Februari 2010

Membuat grafik batang statis dengan menggunakan elemen tabel (HTML)

Dalam halaman web, kita pernah melihat tampilan grafik batang. Dalam hal ini, tampilan tersebut dibuat dalam format html.


Di bawah ini, akan terlihat tampilan grafik batang statis dengan menggunakan elemen tabel. Di sini terdapat 2 kolom judul, yaitu perusahaan dan pendapatan. Kemudian dari pendapatan sendiri, menunjukkan sebuah persentase jika dibandingkan dengan yang sebelumnya. Biasanya digunakan angka-angka, tetapi di sini mencoba untuk mengubahnya menjadi grafik batang statis.





Berikut juga disertakan coding dari tampilan seperti di atas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>GRAFIK BERBASIS TABEL</title>


</head>


<body>


<font color="Black" face="Arial Black" size="5" >Membuat grafik batang statis dengan menggunakan elemen tabel</font>
<br/>
<br/>
<table width="600" >
<tr>
<td width="600" colspan="2">
<table rules="rows" frame="hsides" align="left" cellspacing="0" cellpadding="10">
<tr><!-- Mengatur lebar kolom -->
<th width="200">PERUSAHAAN</th>
<th width="500">PENDAPATAN</th>
</tr>
</table>
</td>
</tr>


<tr>
<td>
<table frame="below" align="left" cellspacing="0"cellpadding="3">
<tr><!-- Mengatur lebar kolom -->
<td width="200">Angin Reboot Ltd</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="150" colspan="5" >
<table border="1">
<tr>
<th width="150" height="16" colspan="5" bgcolor="#008000"></th>
</tr>
</table>
</td>
<td >+150%</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
</tr>


<tr><!-- Mengatur lebar kolom -->
<td width="200">Command Prompt Inc</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="50" colspan="2"><table border="1">
<tr>
<td width="50" height="16" colspan="2" bgcolor="#008000">
</td>
</tr>
</table>
</td>
<td width="25">+50%</td>
<td width="25"></td>
<td width="25"></td>
</tr>


<tr><!-- Mengatur lebar kolom -->
<td width="200">Hibernate Ltd</td>
<td width="50"></td>
<td width="25"></td>


<td width="25" align="right">-23%</td>
<td width="25"><table border="1" align="right">
<tr>
<td width="20" height="16" bgcolor="#FFFF00">
</td>
</tr>
</table>
</td>
<td width="25"></td>
<td width="25"></td>
</tr>


<tr><!-- Mengatur lebar kolom -->
<td width="200">Shutdown Ltd</td>
<td width="25"></td>


<td width="25"></td>
<td width="25">-75%</td>
<td width="100"><table border="1">
<tr>
<td width="100" height="16" colspan="3" bgcolor="#FF0000">
</td>
</tr>
</table>
</td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
<td width="25"></td>
</tr>
</table>
</td>
</tr>
</table>
<p >By... </p>
<p><em><a href="endrakilla.blogspot.com" target="_blank"><strong>endrakilla.blogspot.com</strong></a></em></p>


</body>
</html>


Mudah-mudahan contoh ini dapat bermanfaat bagi para pembaca. Silakan beri masukan di bawah ini, harap maklum (masih belajar). hehehe...Sampai jumpa di materi-materi lainnya..

0 komentar:

Posting Komentar

Pengikut