Membuat kreasi grafik batang garis dengan memanfaatkan elemen tabel
hasilnya bisa dilihat pada gambar di bawah ini
adapun langkah-langkah dalam pembuatan tabel tersebut adalah dengan mengatur letak atau posisi dari masing-masing tag yang ada dalam tabel yaitu
-Tag atau table heading yang berfungsi mendefinisikan header
-Tag atau table row yang berfungsi mendefinisikan baris
-Tag atau table data yang berfungsi mendefinisikan sel
namun dalam pembuatan diagram batang yang diubah adalah Tag Tr dan Tdnya saja
Sebuah tabel tidak selalu memiliki ukuran dan jumlah sel yang sama dalam
setiap baris ataupun kolomnya.untuk itu perlu
dilakukan penggabungan (merge) sel. Dalam konteks elemen tabel,
penggabungan sel dapat dilakukan berdasar baris (rowspan) atau kolom
(colspan). Untuk diagram batang dengan memanfaatkan elemen tabel ini anda rubah colspannya sehingga akan terlihat hasil seperti pada gambar di atas
agar lebih menarik anda bisa mengubah warna, tampilan atau background sesuai dengan keinginan anda
source codenya==>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Grafik Berbasis tabel</title>
</head>
<body background ="6.jpg">
<marquee><font color="Red" face="arial" size="5">Kreasi Grafik Batang Dengan Memanfaatkan Elemen Garis</font></marquee>
<blink><font color="Red" face="Arial" size="4">Created by: Novi Khassifa</font></blink>
<table width="561" height="241">
<tr>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Perusahaan</td>
<td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>
</tr>
<tr >
<!-- -->
<td width="172" >Angin Reebot Ltd </td>
<td width="27"></td>
<td width="31"></td>
<td width="25"></td>
<td width="33"></td>
<td width="16"></td>
<td width="13"></td>
<td colspan="6" bgcolor="#006600"></td>
<td width="17">+150%</td>
</tr>
<tr>
<td>Command Prompt, Inc </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="4" bgcolor="#006600"></td>
<td width="16">+55%</td>
<td width="16"></td>
<td></td>
</tr>
<tr>
<td>Hibernate Ltd </td>
<td></td>
<td></td>
<td></td>
<td>-23%</td>
<td colspan="2" bgcolor="#FFFF00"></td>
<td width="34"></td>
<td width="16"></td>
<td width="16"></td>
<td width="16"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Shutdown Ltd </td>
<td></td>
<td>-75%</td>
<td colspan="4" bgcolor="#FF0000"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="14" style="border-top:#000000 solid"></td>
</tr>
</table>
<a href="Tugas2.html">Klik di sini</a> Untuk Mengakses Desain Tabel Berikutnya
<hr color="black"></hr>
</body>
</html>
selamat mencoba!!! ^_^
Grafik Batang Berbasis Tabel
.
Langganan:
Posting Komentar (Atom)
The ReaL GeJe ^^
KHASSIFA SI BINTU NAHL
0 komentar:
Posting Komentar