• ..


Pada kesempatan kali ini, saya akan mencoba berbagi tentang cara pembuatan grafik dengan memanfaatkan elemen tabel pada kode html. Sebuah grafik batang dapat dibentuk dari kolom-kolom dan baris-baris yang disatukan(di-merge).

Tampilan dari kode HTML adalah sebagai berikut:


Untuk lebih jelasnya, silahkan lihat kode-HTML-nya dibawah ini.
<!DOCTYPE HTML>
<HTML lang="en">
 <head>
  <title>Grafik Penjualan Cabai</title>
  <LINK REL="SHORTCUT ICON" HREF="/Prak.BPW/images/ICON%20AJAH/Microsoft%20Xbox.ico"/>
 </head>
 <body>
  <table align=center border=0>
  <tr>
   <td></td>
   <td>
    <table border=0 cellspacing=0 height="510">
    <tr height=20 align="center">
     <td></td>
     <td colspan=20>GRAFIK PENJUALAN CABAI<br />BULAN OKTOBER-DESEMBER 2010<br /><br /></td>
    </tr>
    <tr>
     <td align="center" rowspan=12>Jumlah (Kg)</td>
    </tr>
    <tr>
     <td valign=top height=50 width=20 align="center">100</td>
     <td width=10></td>
     <td width=10 bgcolor="black"></td>
     <td width=20></td>
     <td width=40></td>
     <td width=40></td>
     <td width=40></td>
     <td width=40></td>
     <td></td>
     <td rowspan=9 width=40 bgcolor="red"></td>
     <td width=40></td>
     <td width=40></td>
     <td width=40></td>
     <td></td>
     <td width=40></td>
     <td width=40></td>
     <td rowspan=9 width=40 bgcolor="yellow"></td>
     <td width=40></td>
    </tr>
    <tr>
     <td width=10></td><td></td>
     <td bgcolor="black"></td>
     <td></td>
     <td></td>
     <td rowspan=8 bgcolor="blue"></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td rowspan=8 bgcolor="green"></td>
    </tr>
    <tr>
     <td width=10></td><td></td>
     <td bgcolor="black"></td>
     <td></td>
     <td rowspan=7 bgcolor="red"></td>
     <td ></td>
     <td rowspan=7 bgcolor="green"></td>
     <td></td>
     <td rowspan=7 bgcolor="blue"></td>
     <td ></td>
     <td ></td>
     <td></td>
     <td></td>
     <td rowspan=7 bgcolor="blue"></td>
    </tr>
    <tr>
     <td width=10></td><td></td>
     <td bgcolor="black"></td>
     <td></td>
     <td ></td>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     <td rowspan=6 bgcolor="red"></td>
    </tr>
    <tr>
     <td height=50 align="center">50</td>
     <td width=10></td>
     <td bgcolor="black"></td>
     <td></td>
     <td rowspan=5 bgcolor="yellow"></td>
     <td></td>
     <td></td>
     <td rowspan=5 bgcolor="green"></td>
     <td></td>
    </tr>
    <tr>
     <td width=10></td><td></td>
     <td bgcolor="black"></td>
     <td></td>
     <td></td>
     <td rowspan=4 bgcolor="yellow"></td>
     <td></td>
    </tr>
    <tr>
     <td width=10></td><td></td>
     <td bgcolor="black"></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td width=10></td><td></td>
     <td bgcolor="black"></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td width=10></td><td></td>
     <td bgcolor="black"></td>
     <td></td>
     <td></td>
     <td></td>
    </tr>
    <tr>
     <td valign=top height=20 align="center">0</td>
     <td width=10></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black" width=20></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black" width=20></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
     <td bgcolor="black"></td>
    </tr>
    <tr align=center height=10>
     <td></td>
     <td width=10></td>
     <td></td>
     <td></td>
     <td>M1</td>
     <td>M2</td>
     <td>M3</td>
     <td>M4</td>
     <td width=20></td>
     <td>M1</td>
     <td>M2</td>
     <td>M3</td>
     <td>M4</td>
     <td width=20></td>
     <td>M1</td>
     <td>M2</td>
     <td>M3</td>
     <td>M4</td>
    </tr>
    <tr align=center height=20>
     <td></td>
     <td colspan=4></td>
     <td colspan=4>OKTOBER</td>
     <td width=20></td>
     <td colspan=4>NOPEMBER</td>
     <td width=20></td>
     <td colspan=4>DESEMBER</td>
    </tr>
    <tr align=center height=20>
     <td></td>
     <td colspan=20></td>
    </tr>
    <tr align=center height=20>
     <td></td>
     <td colspan=20>&copy; <i>haqiphoenix</i></td>
    </table>
   </td>
  </table>
 </body>
</html>