Minggu, 06 Februari 2011

Manfaat Elemen Tabel dalam Web

Membuat Desain Frame
Dalam membuat desain frame kali ini mula-mula kita membuat desain frame yang pertama. Source kode desain frame yang pertama adalah:
<!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> Demo Frame </title>
</head>

<frameset cols = "20%,*,20%">
<frame src ="link1.html" />
<frame src ="internallink.html" />
<frame src ="link1.html" />

<noframes>
</noframes>

</frameset>
</html>

Simpan desain frame yang pertama dengan nama studi kasus1.html.
Setelah kita membuat desain frame yang pertama tadi kemudian kita membuat desain frame yang kedua. Desain frame yang pertama ini akan kita gunakan untuk membuat desain frame yang kedua. Source kode desain frame yang kedua adalah:
<!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> Demo Frame </title>
</head>

<frameset rows = "20%,*,20%">
<frame src="link2.html" />
<frame src="studikasus1.html" />
<frame src="link2.html" />

<noframes>
</noframes>

</frameset>
</html>

Maka dapat kita peroleh hasil sebagai berikut:





Grafik Batang Statis dengan Memanfaatkan Elemen Tabel

Source Kodenya:
<!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 Batang Statis dengan Memanfaatkan Elemen Tabel</title>
</head>

<body background="melodi.jpg">

<h2>Grafik Pendapatan Perusahaan</h2>

<hr align="left" width="700"></hr>

<table width="700" border="0">
<tr>
<td width="350"><strong>Perusahaan</strong></td>
<td width="350"><strong>Pendapatan</strong></td>
</tr>
</table>

<hr align="left" width="700"/>
<table width="700" border="0">

<tr>
<td width="175">Angin Reboot Ltd</td>
<td width="175" colspan=3></td>
<td width="175" colspan=2 bgcolor="green"></td>
<td width="175">+150%</td>
</tr>

<tr>
<td width="175">Command Prompt, Inc</td>
<td width="175" colspan=3></td>
<td width="75" bgcolor="green"></td>
<td width="100">+55%</td>
<td width="175"></td>
</tr>


<tr>
<td width="175">Hibernate Ltd</td>
<td width="75"></td>
<td width="50" align="right">-23%</td>
<td width="50" bgcolor="yellow"></td>
<td width="350" colspan=3></td>
</tr>


<tr>
<td width="175">Shutdown Ltd</td>
<td width="75" align="right">-75%</td>
<td width="100" colspan=2 bgcolor="red"></td>
<td width="350" colspan=3></td>
</tr>
</table>

<hr align="left" width="700"/>


</body>
</html>

Hasilnya:


Desain Tabel Perbandingan dengan Memanfaatkan Fitur Pengelompokkan

Source Kodenya:
<!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>Tabel Perbandingan Item</title>
</head>

<body background="2.jpg">

<table width="700" border="0" align="left">

<tr>
<td width="375" colspan=8 align="center">PERBANDINGAN FITUR</td>
</tr>

<tr>
<td colspan="8" style="border-bottom:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center"><strong>No</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="150" align="center"><strong>Fitur</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="75" align="center"><strong>Enterprise</strong></td>
<td width="1" rowspan="10" style="border-left:#000000 solid thin;"></td>
<td width="25" align="center"><strong>Pro</strong></td>
<td width="50" align="center"><strong>Free</strong></td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center">1</td>
<td width="150">Garansi seumur hidup</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">2</td>
<td width="150">Multiuser</td>
<td width="75" align="center">X</td>
<td width="25" align="center">-</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">3</td>
<td width="150">Update otomatis</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">4</td>
<td width="150">Cetak laporan</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">-</td>
</tr>

<tr>
<td width="25" align="center">5</td>
<td width="150">Notifikasi error</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

<tr>
<td width="25" align="center">6</td>
<td width="150">Ubah tema</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td width="25" align="center">7</td>
<td width="150">Try icon</td>
<td width="75" align="center">X</td>
<td width="25" align="center">X</td>
<td width="50" align="center">X</td>
</tr>

<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>

</table>

</body>
</html>

Hasilnya:

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)