12.11

Membuat Kreasi Grafik dengan Elemen Tabel

Diposting oleh berbagi ilmu |

Pada umumnya, tabel digunakan untuk menampilkan data tabular dalam bentuk baris dan kolom. Pada pemrograman web dengan HTML, elemen-elemen yang digunakan untuk membuat dabel dapat dikreasikan untuk membuat suatu grafik berupa diagram batang. Berikut adalah contoh pengapikasiannya:

Berikut adalah listing programnya:

<!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>
<p>
<font color="Black" face="Times New Romans" size="5">Membuat grafik berbasis tabel 1</font>
</p>

<table width="600" >
<tr>
<td colspan="20" style="border-top:#000000 solid;border-bottom:#000000 solid;">
<table rules="rows" align="left" cellspacing="1" cellpadding="7">
<tr><!-- Mengatur lebar kolom -->
<th width="230">PERUSAHAAN</th>
<th width="566">PENDAPATAN</th>
</tr>
</table>
</td>
</tr>

  <tr >
    <!--&nbsp;-->
    <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"style="border:#000000 solid"></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"style="border:#000000 solid"></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"style="border:#000000 solid"></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"style="border:#000000 solid"></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>

</body>
</html>




0 komentar:

Posting Komentar

Subscribe