Halo KawaNn..
ini adalah tutorial baru lagi yang saya temuin dan coba aq share kan lagi sama kalian, moga pembelajaran kali ini semakin lebih baik ( mksudnya sih nambah ilmu aja, hehe ). sebenarnya mudah sih kalu ngerti konsepan nya, tapi kalu yang belum tau sama sekali ya pasti bakalan pusing 7 keliling, seperti saya pada awalnya, tapi akhirnya bisa juga terselesaikan.
Pada dasarnya pembuatan grafik ini menggunakan elemen pembuatan tabel, trus untuk menegak kan tabel yang ingin kalian buat. bisa menggunakan perintah "rowspan" kemudian atur letak dan ketinggian nya, merubah satu sama dengan merubah semuanya.
Sponsored by :
Untuk lebih jelasnya bisa dilihat pada script yang sudah aq share kan :
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Grafik</title>
</head>
<body>
<table border=0 align="center" cellspacing=0 cellpadding=3>
<caption><b>GRAFIK PERBANDINGAN SIKAP</b></caption>
<pre>
<font face="consolas ">
@andibayu.blogspot.com</br>
209533420400
pti b 2009
</font>
</pre>
<tr>
<td align="right">100</td>
<td rowspan=10 bgcolor=black></td>
<td width="25" height="20" colspan=25>
</tr>
<tr>
<td align="right">90</td>
<td width="15" height="20" colspan=26></td>
</tr>
<tr>
<td align="right">80</td>
<td width="15" height="20" colspan=25></td>
</tr>
<tr>
<td align="right">70</td>
<td width ="30" rowspan=7></td>
<td width ="20" height="30" rowspan=2></td>
<td width ="20" height="200" bgcolor=aqua rowspan=7></td>
<td width ="20" height="20" rowspan=1></td>
<td width ="20" rowspan=3></td>
<td width ="20" bgcolor=purple rowspan=7></td>
<td width ="20" rowspan=7></td>
<td width ="20" rowspan=1></td>
<td width ="20" rowspan=3></td>
<td width ="20" rowspan=5></td>
<td width ="20" rowspan=5></td>
<td width ="20" rowspan=4></td>
<td width ="20" rowspan=7></td>
<td width ="20" rowspan=3></td>
<td width ="20" rowspan=3></td>
<td width ="20" rowspan=3></td>
<td width ="20" rowspan=4></td>
<td width ="20" rowspan=5></td>
<td width ="20" rowspan=7></td>
<td rowspan=5></td>
<td rowspan=6></td>
<td rowspan=6></td>
<td rowspan=4></td>
<td rowspan=3></td>
<td width ="15" rowspan=7></td>
</tr>
<tr >
<td align="right">60</td>
<td width ="15" bgcolor=yellow rowspan=6></td>
<td width ="15" height="120" bgcolor=red rowspan=6></td>
</tr>
<tr>
<td align="right">50</td>
<td width ="15" height="120" rowspan=5 bgcolor=red></td>
</tr>
<tr >
<td align="right">40</td>
<td width ="15" height="80" bgcolor=grey rowspan=4></td>
<td width ="15" bgcolor=aqua rowspan=4></td>
<td width="15" bgcolor=red rowspan=4></td>
<td width="15" bgcolor=aqua rowspan=4></td>
<td width="15" bgcolor=yellow rowspan=4></td>
<td width="15" bgcolor=purple rowspan=4></td>
</tr>
<tr >
<td align="right">30</td>
<td width ="15" height="60" bgcolor=purple rowspan=3></td>
<td width ="15" bgcolor=grey rowspan=3></td>
<td width ="15" bgcolor=grey rowspan=3></td>
</tr>
<tr >
<td align="right">20</td>
<td width ="15" height="40" bgcolor=yellow rowspan=2></td>
<td width ="15" bgcolor=grey rowspan=2></td>
<td width="15" bgcolor=purple rowspan=2></td>
<td width="15" bgcolor=red rowspan=2></td>
</tr>
<tr >
<td align="right">10</td>
<td width="15" height="20" bgcolor=aqua rowspan=1></td>
<td width="15" bgcolor=yellow rowspan=1></td>
</tr>
<tr>
<td></td>
<td height="25" colspan=25 bgcolor=black></td>
</tr>
<tr>
<td colspan=3></td>
<td colspan=5 align="center"><b>Andi</b></td>
<td></td>
<td colspan=5 align="center"><b>Agus</b></td>
<td></td>
<td colspan=5 align="center"><b>Riris</b></td>
<td></td>
<td colspan=5 align="center"><b>Melinda</b></td>
<td></td>
</table>
<br>
<br>
<table border=0 align="left" cellspacing=3 cellpadding=3>
<tr>
<td><b><i>Keterangan:</i></b></td>
</tr>
<tr>
<td bgcolor=red width="40"></td>
<td><i> : Pemarah</i></td>
</tr>
<tr>
<td bgcolor=aqua width="40"></td>
<td><i> : Mudah Bergaul</i></td>
</tr>
<tr>
<td bgcolor=yellow width="40"></td>
<td><i> : Mudah Memaafkan</i></td>
</tr>
<tr>
<td bgcolor=grey width="40"></td>
<td><i> : Pendendam</i></td>
</tr>
<tr>
<td bgcolor=purple width="40"></td>
<td><i> : Kritis </i></td>
</tr>
</table>
</body>
</html>
gimana?? udah ngerti? silahkanlangsung di coba..
agar lebih membantu lebih memahami lagi, di sini aq tampilkan hasil dari script diatas :
Nah, gambar diatas adalah hasil tampilan dari script yang sudah saya share kan, semoga pembelajaran kali ini semakin dapat memberikan kebermanfaatan bagi saya pribadi khususnya dan kalian semua pada umumnya guys....
Sekian dari saya, apabila ada kekurangan di di berikan saran dan kritik yang membangun ya preNn. makasiHh..
See you next time..
Bye..
0 komentar:
Posting Komentar
Jangan Pernah Kita Usul Jika Asal, Dan Jika Mau Usul Lebih Baik Jangan Pernah Asal...