Saturday, February 20, 2010

Memanfaatkan Elemen Tabel, Pada Pemrograman Web

Kita sering menjumpai pada halaman web sering kali melihat penggunaan tabel, bagai manakah cara untuk membuat hal tersebut...

Mari kita belajar Pemrograman web dengan menggunakan pemanfaattan fungsi tabel...

1. Pemanfaatan sebagai grafik batang yang dapat ditunjukkan dari gambar dibawah ini
 

Adapun code yang didapat dari gambar diatas :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Untitled Document</title><style type="text/css"><!--
.style1 {
    font-family: Georgia, "Times New Roman", Times, serif;    font-size: 14px;    color: #000000;
    font-weight: bold;    font-style: italic;}
body {    background-image: url(Vista_sbliss.jpg);}
.style3 {
    color: #FFFF00;    font-weight: bold;}
.style5 {
    color: #FF6600;    font-weight: bold;}
.style6 {
    color: #FF66CC;    font-weight: bold;}
.style7 {
    color: #CC0033;    font-weight: bold;}
.style8 {
    color: #FFFF00;    font-style: italic;    font-weight: bold;}
.style9 {
    color: #FF3300;    font-style: italic;    font-weight: bold;}
.style10 {
    color: #CC33CC;    font-style: italic;    font-weight: bold;}
.style11 {
    color: #CC0033;    font-style: italic;    font-weight: bold;}
.style12 {color: #FFFFFF}
-->
</style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body>
<p class="style1">Tabel yang digunakan dalam pembacaan fungsi Grafik Batang pada suatu Perusahaan</p><hr align="left" width="640">
<table width="634" border="0">  <tr>    <td width="321"><strong>Perusahaan</strong></td>    <td width="303"><strong>Pendapatan</strong></td>  </tr></table><hr align="left" width="640"><table width="643" border="0">
  <tr>    <td width="151"><span class="style3">Angin Reboot, Ltd </span></td>    <td colspan="3">&nbsp;</td>
    <td colspan="2"><table width="150" border="0" bgcolor="#FFFF00">
     .... Kelanjuttan File Code Dapat di Download disini


2. Desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan.

Seperti pada gambar 

 
Code Untuk Pembuatannya :

<!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">
<head>
<title>Bermain Tabel Ke-2</title>
<style type="text/css">
<!--
.style3 {font-family: Geneva, Arial, Helvetica, sans-serif; font-weight: bold; }
.style4 {
    font-size: x-large;
    color: #FF0000;
}
.style5 {color: #FFFF00}
.style6 {color: #CC0000}
body {
    background-image: url(Vista_sbliss.jpg);
}
-->
</style>
</head>

<body>

<table width="470" border="0" align="center" >
  <tr>
    <td colspan="8" style="border-bottom:#000000 solid;"><div align="center" class="style4">Perbandingan Fitur </div></td>
  </tr>
  <tr>
    <td width="31"align="center"><span class="style3">No</span></td>
    <td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td width="208" align="center"><span class="style3">Fitur</span></td>
    <td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0">&nbsp;</td>
    <td width="92" align="center"><span class="style3">Enterprise</span></td>
    <td width="0" rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td width="0"align="center"><span class="style3">Pro</span></td>
    <td width="0"align="center"><span class="style3">Free</span></td>
  </tr>


... Code selengkapnya dapat diDownload Di Sini

Semoga Bermanfaat...Setelah download jangan lupa kasih Comment ya...Terimakasih

0 comments:

Post a Comment

 

Hyato_Mahasiswa Malang