Sekedar Tulisanku: Kreasi Grafik Batang Statis

Dalam pemrograman web HTML, kita dapat membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel. seperti contoh berikut:

Caranya:

1. Buka Editor teks dan kemudian ketikkan:

<!DOCTYPE html 	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" lang="en"> <head> <title>Grafik Berbasis tabel</title> </head> <body> Kreasi Grafik Statis <table width="561" height="241"> <tr> <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;">Perusahaan</td> <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;">Pendapatan</td> </tr> <tr>  <td width="172">Angin Reebot Ltd </td> <td width="27"></td> <td width="31"></td> <td width="25"></td> <td width="33"></td> <td width="16"></td> <td width="13"></td> <td colspan="6" bgcolor="#006600"></td> <td width="17">+150%</td> </tr> <tr> <td>Command Prompt, Inc </td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td colspan="4" bgcolor="#006600"></td> <td width="16">+55%</td> <td width="16"></td> <td></td> </tr> <tr> <td>Hibernate Ltd </td> <td></td> <td></td> <td></td> <td>-23%</td> <td colspan="2" bgcolor="#FFFF00"></td> <td width="34"></td> <td width="16"></td> <td width="16"></td> <td width="16"></td> <td></td> <td></td> <td></td> </tr> <tr> <td>Shutdown Ltd </td> <td></td> <td>-75%</td> <td colspan="4" bgcolor="#FF0000"></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td colspan="14" style="border-top:#000000 solid"></td> </tr> </table> </body> </html>

2. Simpan dengan ekstensi .html

3. Eksekusi file tersebut sehingga tampilannya menjadi:

Sekedar Tulisanku

Wednesday, February 24, 2010

Kreasi Grafik Batang Statis

No comments:

Post a Comment