Selasa, 08 Februari 2011

Kreasi Grafik Batang Berbasis Tabel

MEMBUAT KREASI GRAFIK BATANG STATIS DENGAN MEMANFAATKAN ELEMEN TABEL

Bagaimanapun, fleksibilitas HTML memungkinkan kita untuk menampilkan data di dalam tabel secara atraktif.
Artinya, tak hanya sebatas pada data tabular saja, namun juga mengizinkan kita melakukan penformatan.
 

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional??EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<title>Grafik Berbasis Tabel</title>
</head>

<p>
<h2>Kreasi Grafik Batang Berbasis Tabel</h2>
<p>

<hr align="left" width="700"></hr>
<table width="700" border="0">
<tr>
<th width="400"><b>PERUSAHAAN</b></th>
<td width="400"><b>PENDAPATAN</b></td>
</tr>
</table>
<hr align="left" width="700"></hr>
<table width="700" border="0">

<!-- data pertama -->
<tr>
    <td>Angin Reboot Ltd</td>
    <td width="150" colspan=3></td>
    <td width="150" colspan=2 bgcolor="blue"></td>
    <td width="150">+150%</td>
</tr>

<!-- data kedua -->
<tr>
    <td>Command Prompt, Inc</td>
    <td width="150" colspan=3></td>
    <td width="75" bgcolor="pink"></td>
    <td width="100">+55%</td>
    <td width="150"></td>
</tr>

<!-- data ketiga -->
<tr>
    <td>Hibernate Ltd</td>
    <td width="75"></td>
    <td width="50" align="right">-23%</td>
    <td width="50" bgcolor="red"></td>
    <td width="350" colspan=3></td>
</tr>

<!-- data keempat -->
<tr>
    <td>Shutdown Ltd</td>
    <td width="75" align="right">-75%</td>
    <td width="100" colspan=2 bgcolor="brown"></td>
    <td width="350" colspan=3></td>
</tr>

</table>
<hr align="left" width="700"></hr>
<body background="floral.jpg">
</body>
</html>





0 komentar:

Posting Komentar