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"> </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;"> </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"> </td>
<td width="92" align="center"><span class="style3">Enterprise</span></td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"> </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
