Nia Wita: Pembuatan Grafik Berbasis Tabel Pada HTML

Grafik adalah suatu yang digunakan untuk mempresentasikan hasil pada suatu perusahaan ataupun instansi grafik ada bermacam-macam, kali ini saya akan mencoba untuk membuat grafik berbasi tabel.

Gambar diatas adalah contoh grapik berbasi tabel

dan untuk script HTML nya seperti berikut :

<!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>
<span style="font-family:arial;font-size:130%;color:Blue;">Kreasi Grafik Statis</span>
<table width="561" height="241">
 <tr>
     <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Perusahaan</td>    
        <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>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>

Selamat mencoba membuat. peace!!

Nia Wita

Pages

Rabu, 16 Februari 2011

Pembuatan Grafik Berbasis Tabel Pada HTML

Tidak ada komentar:

Posting Komentar