Monday, February 14, 2011

Grafik..

Pembuatan grafik batang statis dengan memanfaatkan elemen tabel bisa dipakai untuk melengkapi sajian dalam web yang perlu ditampilkan dalam bentuk grafik.
Hasilnya seperti:


Codenya:
<!DOCTYPE HTML> 
<html lang="en"> 
 
<head> 
<title>Tugas Praktikum 1</title> 
</head> 
<body  bgcolor="gray"> 
<table width="700" border="0" cellspacing="1" cellpadding="0">
 <h3>GRAFIK HASIL TEST SD NEGERI PENDTIUM</h3>
 <tr> 
    <td width="22">100</td> 
    <td width="5" bgcolor="#000000"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"> </td> 
    <td width="22"> </td> 
    <td width="22"> </td> 
    <td width="22"> </td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="22"></td> 
    <td width="28"></td> 
  </tr> 
  <tr> 
    <td></td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td></td> 
    <td bgcolor="#0000CC"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td></td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000CC"></td> 
    <td bgcolor="#00CC00"></td> 
    <td></td> 
    <td bgcolor="#33FFFF"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td></td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000CC"></td> 
    <td bgcolor="#00CC00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#33FFFF"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td></td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000CC"></td> 
    <td bgcolor="#00CC00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#33FFFF"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td>50</td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000CC"></td> 
    <td bgcolor="#00CC00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#33FFFF"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td bgcolor="#00FFFF"></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td></td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000CC"></td> 
    <td bgcolor="#00CC00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#33FFFF"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td bgcolor="#00FFFF"></td> 
    <td></td> 
    <td></td> 
    <td bgcolor="#0000FF"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td bgcolor="#00FF00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#00FFFF"></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td></td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000CC"></td> 
    <td bgcolor="#00CC00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#33FFFF"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000FF"></td> 
    <td></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#00FFFF"></td> 
    <td></td> 
    <td></td> 
    <td bgcolor="#0000FF"></td> 
    <td bgcolor="#00FF00"></td> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td></td> 
    <td bgcolor="#00FF00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#00FFFF"></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td></td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000CC"></td> 
    <td bgcolor="#00CC00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#33FFFF"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000FF"></td> 
    <td bgcolor="#00FF00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#00FFFF"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000FF"></td> 
    <td bgcolor="#00FF00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000FF"></td> 
    <td bgcolor="#00FF00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#00FFFF"></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td></td> 
    <td width="5" bgcolor="#000000"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000CC"></td> 
    <td bgcolor="#00CC00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#33FFFF"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000FF"></td> 
    <td bgcolor="#00FF00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#00FFFF"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000FF"></td> 
    <td bgcolor="#00FF00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#00FFFF"></td> 
    <td></td> 
    <td bgcolor="#FF0000"></td> 
    <td bgcolor="#0000FF"></td> 
    <td bgcolor="#00FF00"></td> 
    <td bgcolor="#FFFF00"></td> 
    <td bgcolor="#00FFFF"></td> 
    <td>&nbsp;</td> 
  </tr> 
  <tr> 
    <td height="5">0</td> 
    <td width="5" height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000"></td> 
    <td height="5" bgcolor="#000000">&nbsp;</td> 
  </tr> 
  <tr> 
    <td></td> 
    <td></td> 
    <td></td> 
    <td colspan="5"><div align="center">Herlambang</div></td> 
    <td></td> 
    <td colspan="5"><div align="center">Nidhom</div></td> 
    <td></td> 
    <td colspan="5"><div align="center">Bian</div></td> 
    <td></td> 
    <td colspan="5"><div align="center">Sonny</div></td> 
    <td>&nbsp;</td> 
  </tr> 
</table> 
 
<i>
<p><b>Keterangan:</b></p> 
<table width="300" border="0" cellspacing="0"> 
  <tr> 
    <td width="40" bgcolor="#FF0000"></td> 
    <td width="260">:Kemampuan Membaca</td> 
  </tr> 
  <tr> 
    <td bgcolor="#0000FF"></td> 
    <td>:Kemampuan Menulis</td> 
  </tr> 
  <tr> 
    <td bgcolor="#00FF00"></td> 
    <td>:Kemampuan Mendengar</td> 
  </tr> 
  <tr> 
    <td bgcolor="#FFFF00"></td> 
    <td>:Kemampuan Berbicara</td> 
  </tr> 
  <tr> 
    <td bgcolor="#00FFFF"></td> 
    <td>:Kemampuan Menggambar</td> 
  </tr> 
</table>
</i>
</font> 
</body> 
</html>
Diposkan oleh di
Label:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)