collected pixels: Modul 2 Komponen HTML Lanjut (1)

Pada pembahasan komponen HTML lanjut ini, kita akan belajar untuk membuat kreasi grafik batang statis dengan memanfaatkan elemen tabel.
Pembuatan grafik batang menggunakan kode HTML ternyata tidak sesulit yang dibayangkan.

Kita bisa mengatur panjang dan lebar masing-masing batang statisnya. Selain itu, kita juga dapat memberikan warna backcolour pada masing-masing batang statis.
Pembuatan kreasi grafik batang statis ini menggunakan elemen tabel yang dimerge menjadi satu.
Gambar di atas adalah screen shoot tampilan halaman web kreasi grafik batang statis dengan memanfaatkan elemen tabel.

<!  DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>Grafik Berbasis Tabel</title><br /> </head><br /> <br /> <body><br /> <table width="80%" cellpadding="0" cellspacing="0" bgcolor="white"><tr> <th width="200" height="40" ><hr />Perusahaan <hr /></th> <th colspan="8" ><hr />Pendapatan <hr /></th> </tr> <tr> <td height="27" >Angin Reboot Ltd</td> <td colspan="3" ></td> <td colspan="2" align="left" bgcolor="white"><table width="298"   border="2" cellspacing="0" bgcolor="green"><tr> <th height="23" ></th> </tr> </table></td> <td width="91" align="left" valign="bottom" bgcolor="white">+150%<br /> <br /> </td> <td width="11" colspan="2" align="left" valign="bottom" ></td> </tr> <tr> <td height="33" >Command Prompt, Inc</td> <td colspan="3" ></td> <td width="15" align="left" bgcolor="white"><table width="100"   border="2" cellspacing="0" bgcolor="green"><tr> <th height="23" ></th> </tr> </table></td> <td width="150" align="left" valign="bottom" bgcolor="white">+55%<br /> <br /> </td> <td colspan="3" valign="bottom" ></td> </tr> <tr> <td height="36" >Hibernate Ltd</td> <td width="88" align="right" valign="bottom" ></td> <td width="71" align="right" valign="bottom" >-23%</td> <td width="40" align="right" bgcolor="white"><table width="40"   border="2" cellspacing="0" bgcolor="yellow"> <tr> <th height="23" ></th> </tr> </table></td> </tr> <tr> <td height="27" >Shutdown Ltd</td> <td align="right" valign="bottom" >-75%</td> <td colspan="2" align="right" valign="bottom" bgcolor="white"   ><table width="151" border="2" cellspacing="0" bgcolor="red"><tr> <th height="23" ></th> </tr> </table></td> </tr> <tr> <td height="27" ><hr /> </td> <td align="right" valign="bottom" ><hr /> </td> <td colspan="2" align="right" valign="bottom" bgcolor="white" ><hr   /> </td> <td colspan="5" ><hr /> </td> </tr> </table><br /> </body><br /> </html>

collected pixels

Pages

Rabu, 24 Februari 2010

Modul 2 Komponen HTML Lanjut (1)

Tidak ada komentar:

Posting Komentar