Membuat Grafik dengan Menggunakan Tabel

Minggu, Februari 13, 2011 | 0 Comments

Dalam microsoft office misalnya word, power point dan excel, kita semua bisa membuat tabel dengan cara yang mudah. Masukkan data dan beberapa detik kemudian grafik sudah jadi. Namun, apa jadinya jika kita membuat grafik dengan menggunakan kode HTML 5 dengan memanfaatkan tabel?

Untuk membuat grafik ini, kita hanya memanfaatkan fungsi merge antar cell di dalam tabel. Kita harus jeli bagian mana yang harus kita merge dan bagian mana yang harus kita pertahankan. Dibawah ini merupakan salah satu contoh grafik yang dibuat dengan menggunakan table.

Contoh grafik yang dibuat dengan menggunakan tabel dapat dilihat dibawah ini :



Untuk kode HTML dapat dilihat dibawah ini :




<!DOCTYPE HTML>
<html lang="en">
<head>
<LINK REL="SHORTCUT ICON" HREF="39.jpeg" />
<title>GRAFIK HASIL PENILAIAN DESAIN WEB</title>
</head>
<body bgcolor="#cccccc">
<h3 align="center"><font face="courier new">GRAFIK HASIL PENILAIAN DESAIN WEB</font></h3>

<table cellpadding=8 cellspacing=0>
<!-- baris 1 -->
<tr>
<td width=180 height=30 rowspan=13></td>
<td width=30 height=30 align="center"><b>100</b></td>
<td width=5 height=30 bgcolor="black" rowspan=11></td>
<td rowspan=11 width=15></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan=11 width=15></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan=11 width=15></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan=11 width=15></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>

<!-- baris 2-->
<tr>
<td rowspan=4></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>
</tr>

<!-- baris 3-->
<tr>
<td></td>
<td bgcolor="blue" rowspan=9 width=15></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>
</tr>

<!-- baris 4-->
<tr>
<td bgcolor="red" rowspan=8 width=15></td>
<td bgcolor="#03fe03" rowspan=8 width=15></td>
<td></td>
<td  bgcolor="aqua" rowspan=8 width=15></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>
</tr>

<!-- baris 5-->
<tr>
<td bgcolor="yellow" rowspan=7 width=15></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>
</tr>

<!-- baris 6-->
<tr>
<td width=30 height=30 align="center"><b>50</b></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>
</tr>

<!-- baris 7-->
<tr>
<td rowspan=5></td>
<td bgcolor="red" rowspan=5 width=15></td>
<td></td>
<td></td>
<td></td>
<td bgcolor="aqua" rowspan=5 width=15></td>
<td></td>
<td bgcolor="blue" rowspan=5 width=15></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td bgcolor="aqua" rowspan=5 width=15></td>
<td></td>
</tr>

<!-- baris 8-->
<tr>
<td bgcolor="blue" rowspan=4 width=15></td>
<td></td>
<td bgcolor="yellow" rowspan=4 width=15></td>
<td></td>
<td bgcolor="#03fe03" rowspan=4 width=15></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td bgcolor="#03fe03" rowspan=4 width=15></td>
<td bgcolor="yellow" rowspan=4 width=15></td>
<td></td>
</tr>

<!-- baris 9-->
<tr>
<td bgcolor="#03fe03" rowspan=3 width=15></td>
<td></td>
<td bgcolor="yellow" rowspan=3 width=15></td>
<td></td>
<td bgcolor="red" rowspan=3 width=15></td>
<td></td>
<td></td>
</tr>

<!-- baris 10-->
<tr>
<td bgcolor="red" rowspan=2 width=15></td>
<td></td>
<td bgcolor="blue" rowspan=2 width=15></td>
<td></td>
</tr>

<!-- baris 11-->
<tr>
<td bgcolor="aqua" rowspan=1 width=15></td>
<td></td>
</tr>

<!-- baris 12-->
<tr>
<td width=30 height=5 align="center"><b>0</b></td>
<td colspan=26 bgcolor="black" height=5></td>
</tr>

<!-- baris 13-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan=3><center><b>Alivi</b></center></td>
<td></td>
<td></td>
<td></td>
<td colspan=3><center><b>Ilmi</b></center></td>
<td></td>
<td></td>
<td></td>
<td colspan=3><center><b>Yudi</b></center></td>
<td></td>
<td></td>
<td></td>
<td  colspan=3><center><b>Caca</b></center></td>
<td></td>
<td></td>
</tr>

</table>

<table cellspacing=0 cellpadding=10>

<tr>
<td width=235 height=30 rowspan=11></td>
<td><font face="courier new" size=3><b>Keterangan</b></font></td>
<td></td>
<td></td>
</tr>

<tr>
<td bgcolor="red" width=75></td>
<td> : </td>
<td><font face="courier new" size=2> Pemilihan warna</font></td>
</tr>

<tr>
<td bgcolor="blue" width=75></td>
<td> : </td>
<td><font face="courier new" size=2> Tema web</font></td>
</tr>

<tr>
<td bgcolor="#03fe03" width=75></td>
<td> : </td>
<td><font face="courier new" size=2> Content</font></td>
</tr>

<tr>
<td bgcolor="yellow" width=75></td>
<td> : </td>
<td><font face="courier new" size=2> Aplikasi yang digunakan</font></td>
</tr>

<tr>
<td bgcolor="Aqua" width=75></td>
<td> : </td>
<td><font face="courier new" size=2> Desain</font></td>
</tr>


</table>

</body>

</html>


selamat mencobaaaa !!! Baca Selengkapnya...

Tidak ada komentar:

Posting Komentar

About

- alivi -