- Buat tabel dengan style border = 0 (jadi tabel akan terlihat polos)=> untuk header. Atur row pertama dengan memberi nama pada header tabel, perusahaan dan pendapatan. Kita harus mengatur lebar colom sesuai dengan lebar tabel tabel. Berikut ini adalah code yang harus dibuat.
<hr align="left" width="640"></hr>
<table width ="634" border="0">
<tr>
<td width="321"><strong>Perusahaan</strong></td>
<td width="303"><strong>Pendapatan</strong></td>
</tr>
</table>
<hr align="left" width="640"></hr> - Kita buat tabel baru untuk membuat grafik batang.
<table width="643" border="0">3.Lalu kita membuat sebuah baris baru dengan 4 kolom
4. Untuk grafik pertama, kolom pertama digunakan untuk menuliskan nama perusahaan. Kolom kedua adalah spasi, kolom ketiga adalah grafik batang (beri ukuran lebar 150 dan warna ). Sedangkan kolom ke 4 digunakan untuk menuliskan teks tentang persentase.
5.Pada baris kedua, cara yang digunakan sama, namun kita tinggal mengubah ukuran lebar dan warna dari grafik.
Berikut ini adalah kode untuk membuat ketiga langkah diatas (membuat chart 1 dan 2)
<tr>
<td width="151">Angin Reboot, Ltd</td>
<td colspan="3"> </td>
<td colspan="2"><table width="150" border="0" bgcolor="#FF6600">
<tr>
<td> </td>
</tr>
</table></td>
<td width="171">+150%</td>
</tr>
6.Untuk grafik ketiga dan keempat caranya sama hanya saja kolom kedua digunakan sebagai penampung teks presentase sedangkan kolom ketiga untuk chart dan yang terakhir spasi
Kode html yang digunakan adalah sebagai berikut :
<tr>
<td>Shutdown,Ltd</td>
<td width="44"><div align="right">
</div></td>
<td width="10"><div align="right">-75%</div></td>
<td width="10"><div align="right">
<table width="75" border="0" bgcolor="#f1231c">
<tr>
<td> </td>
</tr>
</table></div></td>
</tr>
Sekian postingan mengenai cara pembuatan grafik dengan menggunakan tabel. Semoga postingan ini dapat bermanfaat untuk semua. Mari belajar web programming dengan html bersama...
Untuk html secara lengkap adalah sebagai berikut :
<!DOCTYPE htmlSelamat malam dan jangan lupa ngopi...
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org//TR//xhtml/DTD/xhtml-transitional.dtd">
<html xmlns= "http ://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tugas Praktikum 1</title>
</head>
<body>
<p> Grafik Batang Penghasilan Perusahaan </p>
<hr align="left" width="640"></hr>
<table width ="634" border="0">
<tr>
<td width="321"><strong>Perusahaan</strong></td>
<td width="303"><strong>Pendapatan</strong></td>
</tr>
</table>
<hr align="left" width="640"></hr>
<table width="643" border="0">
<tr>
<td width="151">Angin Reboot, Ltd</td>
<td colspan="3"> </td>
<td colspan="2"><table width="150" border="0" bgcolor="#FF6600">
<tr>
<td> </td>
</tr>
</table></td>
<td width="171">+150%</td>
</tr>
<tr>
<td>Command Prompt,Inc</td>
<td colspan="3"></td>
<td width="59"><table width="55" border="0" bgcolor="#ff6859">
<tr>
<td> </td>
</tr>
</table></td>
<td width="87"><+55%</td>
</tr>
<tr>
<td>Hibernate,Ltd</td>
<td width="60"><div align="right">
</div></td>
<td width="10"><div align="right">-23%</div></td>
<td width="60"><div align="right">
<table width="23" border="0" bgcolor="#e2001a">
<tr>
<td> </td>
</tr>
</table></div></td>
</tr>
<tr>
<td>Shutdown,Ltd</td>
<td width="44"><div align="right">
</div></td>
<td width="10"><div align="right">-75%</div></td>
<td width="10"><div align="right">
<table width="75" border="0" bgcolor="#f1231c">
<tr>
<td> </td>
</tr>
</table></div></td>
</tr>
</table>
<hr align="left" width="640"></hr>
</body>
</html>
Nb: buat para readers mohon bantuan doa'nya supaya inter bisa menang lawan chelsea nanti malam... :-P Nite
=================================================
kurangin tidur banyakin ngopi
No comments:
Post a Comment