Senin, 14 Februari 2011

Membuat Grafik Batang Statis

Berikut ini merupakan tags HTML untuk membuat grafik batang statis dengan menggunakan elemen tabel :

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>GRAFIK SDN PENDTIUM</title>
</head>

<body bgcolor="#CCCCCC">

<h3 align="center">GRAFIK HASIL TES SD NEGERI PENDTIUM</h3>
<table border=0 align="center" cellspacing=0
cellpadding=5>

<tr>
<td width="10" bordercolor="#000000" bgcolor="#CCCCCC"><strong>100</strong></td>
<td width="1" colspan="-1" rowspan="13" bordercolor="#000000" bgcolor="#000000">&nbsp;</td>
<td width="10" rowspan="12"> </td>
<td width="10" rowspan="4">&nbsp;</td>
<td width="10" rowspan="3">&nbsp;</td>
<td width="10" rowspan="4">&nbsp;</td>
<td width="10" rowspan="5">&nbsp;</td>
<td width="10" rowspan="4">&nbsp;</td>
<td width="10" rowspan="12">&nbsp;</td>
<td width="10" rowspan="7">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="9">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="7">&nbsp;</td>
<td width="10" rowspan="12">&nbsp;</td>
<td width="10" rowspan="10">&nbsp;</td>
<td width="10" rowspan="7">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="9">&nbsp;</td>
<td width="10" rowspan="11">&nbsp;</td>
<td width="10" rowspan="12">&nbsp;</td>
<td width="10" rowspan="9">&nbsp;</td>
<td width="10" rowspan="10">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="8">&nbsp;</td>
<td width="10" rowspan="7">&nbsp;</td>
<td width="10" rowspan="12">&nbsp;</td>
<td width="10">&nbsp;</td>
</tr>
<tr>
<td rowspan="5" bordercolor="#000000" bgcolor="#CCCCCC">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="9" bgcolor="blue">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="8" bgcolor="red">&nbsp;</td>
<td rowspan="8" bgcolor="green">&nbsp;</td>
<td rowspan="8" bgcolor="aqua">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="7" bgcolor="yellow">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bordercolor="#000000" bgcolor="#CCCCCC"><strong>50</strong></td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="5" bordercolor="#000000" bgcolor="#CCCCCC">&nbsp;</td>
<td rowspan="5" bgcolor="red">&nbsp;</td>
<td rowspan="5" bgcolor="aqua">&nbsp;</td>
<td rowspan="5" bgcolor="blue">&nbsp;</td>
<td rowspan="5" bgcolor="aqua">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="4" bgcolor="blue">&nbsp;</td>
<td rowspan="4" bgcolor="yellow">&nbsp;</td>
<td rowspan="4" bgcolor="green">&nbsp;</td>
<td rowspan="4" bgcolor="green">&nbsp;</td>
<td rowspan="4" bgcolor="yellow">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="3" bgcolor="green">&nbsp;</td>
<td rowspan="3" bgcolor="yellow">&nbsp;</td>
<td rowspan="3" bgcolor="red">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td rowspan="2" bgcolor="red">&nbsp;</td>
<td rowspan="2" bgcolor="blue">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bgcolor="aqua">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td bordercolor="#000000" bgcolor="#CCCCCC"><strong>0</strong></td>
<td colspan="25" bordercolor="#000000" bgcolor="#000000">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="3" bordercolor="#000000" bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="5" bgcolor="#CCCCCC"><strong>Herlambang</strong></td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="5" bgcolor="#CCCCCC"><strong>Nidhom</strong></td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="5" bgcolor="#CCCCCC"><strong>Bian</strong></td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="5" bgcolor="#CCCCCC"><strong>Sonny</strong></td>
<td bgcolor="#CCCCCC">&nbsp;</td>
<td bgcolor="#CCCCCC">&nbsp;</td>
</tr>

<tr>
<td colspan="8" bordercolor="#000000" bgcolor="#CCCCCC">&nbsp;</td>
<td colspan="20" bgcolor="#CCCCCC">&nbsp;</td>
</tr>
<tr>
<td colspan="8" bordercolor="#000000" bgcolor="#CCCCCC"><i><b>Keterangan : </b></i></td>
<td colspan="20" bgcolor="#CCCCCC">&nbsp;</td>
</tr>

<tr>
<td colspan="3" rowspan="5" bordercolor="#000000">&nbsp;</td>
<td colspan="5" bgcolor="red">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan membaca </i></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="blue">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan menulis </i></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="green">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan mendengar </i></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="yellow">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan berbicara </i></td>
<td>&nbsp;</td>
</tr>
<tr>
<td colspan="5" bgcolor="aqua">&nbsp;</td>
<td bgcolor="#CCCCCC">:</td>
<td colspan="18" bgcolor="#CCCCCC"><i>Kemampuan menggambar </i></td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>



Sedangkan screenshot-nya dapat dilihat pada gambar di bawah ini :

0 komentar:

Posting Komentar

 

time2life © 2008 . Design By: SkinCorner