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