Rabu, 24 Februari 2010

Membuat Grafik Statis

Minggu yang lalu kita sudah mengetahui dasar-dasar html, berikutnya kita akan mencoba bermain dengan tabel. Di bawah ini adalah skrip untuk membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel, mari kita pelajari bersama :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Grafik Statis dalam Tabel</title>
</head>
<body>
<table width="550" >
<tr>
<td width="550" colspan="2">
<table frame="hsides" align="left" cellspacing="0" cellpadding="10">
<tr>
<th width="150">Perusahaan</th>
<th width="400" colspan="16">Pendapatan</th>
</tr>
</table>
</td>
</tr>


<tr>
<td>
<table frame="below" align="left" cellspacing="0"cellpadding="0">

<tr>
<td>Angin Reboot Ltd</td>
<td width="200" colspan="8"></td>
<td width="150" height="30" colspan="6"><table width="150" height="25" border="2" bgcolor="green" cellspacing="0" cellpadding="0"></table></td>
<td width="50" colspan="2">+150%</td>
</tr>

<tr>
<td width="150">Command Prompt Inc</td>
<td width="200" colspan="8"></td>
<td width="50" colspan="2" height="30"><table width="50" height="25" border="2" bgcolor="blue" cellspacing="0" cellpadding="0"></table></td>
<td width="75" colspan="3">+50%</td>
<td width="75" colspan="3"></td>
</tr>

<tr>
<td>Hibernate Ltd</td>
<td colspan="5" width="125"></td>
<td colspan="2" align="right" width="52">-23%</td>
<td width="23" height="30"><table width="23" height="25" border="2" bgcolor="yellow" cellspacing="0" cellpadding="0"></table></td>
<td colspan="8" width="200"></td>
</tr>
<tr>
<td>Shutdown Ltd</td>
<td colspan="5" width="125" align="right">-75%</td>
<td colspan="3" width="75" height="30"><table width="75" height="25" border="2" bgcolor="red" cellspacing="0" cellpadding="0"></table></td>
<td colspan="8" width="200"></td>
</tr>

</table>
</td>
</tr>

</table>
</body>
</html>

jika penulisan kode di atas susah benar, maka tampilannya akan seperti di bawah ini:


Tidak ada komentar:

Posting Komentar