Pages

Labels

Minggu, 21 Februari 2010

Grafik Berbasis Tabel

Selain belajar bikin tabel standar n tabel "ajaib". Sekarang kita belajar buat bikin grafik. Dengan memanfaatkan fungsi colspan dan bg color pada tabel kita bisa bikin grafik pake tabel.
Sintaksnya kayak gini...

<!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 1</title> </head>


<body>
<table width="600" >
<tr>
<td width="600" colspan="2">
<table frame="hsides" align="left" cellspacing="0" cellpadding="5">
<!-- Mengatur lebar kolom -->
<tr>
<th width="200">Perusahaan</th>
<!-- Gabung kolom nama dan alamat -->
<th width="400" >Pendapatan</th>
</tr>
</table>
</td>
</tr>


<tr>
<td>
<table frame="below" align="left" cellspacing="0"cellpadding="1">
<!-- data pertama -->
<tr>
<td width="200">Angin Reboot Ltd</td>
<td width="25"></td>
<td width="70"></td>
<td width="30"></td>
<td width="200" colspan="2"><table bgcolor="black"><tr><th width="200" height="20" bgcolor="green"></th></tr></table></td>
<td>+150%</td>
</tr>

<tr>
<td width="200">Command Prompt,Inc</td>
<td width="25"></td>
<td width="70"></td>
<td width="30"></td>
<td width="80"><table bgcolor="black"><tr><th width="80" height="20" bgcolor="green"></th></tr></table></td>
<td align="left" colspan="2">+55%</td>
</tr>


<tr>
<td width="200">Hibernate Ltd</td>
<td width="25"></td>
<td width="70" align="right">-23%</td>
<td width="30" ><table bgcolor="black" align="right"><tr><th width="30" height="20" bgcolor="yellow"></th></tr></table></td>
<td width="80"></td>
<td width="120"></td>
</tr>

<tr>
<td width="200">Shutdown Ltd</td>
<td width="25" align="right">-75%</td>
<td width="100" colspan="2"><table bgcolor="black"><tr><th width="100" height="20" colspan="2" bgcolor="red"></th></tr></table></td>
<td width="80"></td>
<td width="120"></td>
</tr>
</table>
</td>
</tr>

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


klik disini untuk sintaksnya

Hasilnya...


Jangan lupa cek HTML validatornya...

0 komentar:

Posting Komentar

 

Blogger news

Blogroll

Blogger templates