Untuk membuat desain tabel perbandingan item dengan memanfaatkan fitur
pengelompokan. Contoh hasilnya diperlihatkan seperti di bawah ini
langkah-langkah pembuatannya adalah hampir sama dengan yang pertama dengan memgatur letak atau posisi dari Tagnya ditambah dengan memanfaatkan elemen tabel. Elemen tabel menyediakan sejumlah atribut yang dapat digunakan untuk memformat visualisasi tabel.
Tiga atribut pertama yang sering digunakanadalah align (untuk mengatur posisi), cellspacing (untuk mengatur spasi antarsel) dan cellpadding (untuk mengatur spasi antara border sel denganisinya).
Dalam pembuatan tabel ini format yang di atur adalah format alignnya, selanjutnya dengan memanfaatkan penggabungan (merge) sel yaitu colspan seperti pada pembuatan grafik batang sebelumnya. Anda bisa mengatur letak posisinya sehingga dapat terlihat seperti gambar di atas.
sourcode untuk desain tabel yang kedua...
<!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>Grafik Berbasis tabel 2</title>
</head>
<body>
<marquee><font color="Red" face="arial" size="5">Desain Tabel Dengan Fitur Pengelompokan</font></marquee>
<blink><font color="Red" face="Arial" size="4">Created by: Novi Khassifa</font></blink>
<table width="470" height="401" border="0">
<tr>
<td colspan="8" style="border-bottom:#000000 solid;"><p align="center"><font color="black" face="TIME NEW ROMAN" siz"4">PERBANDINGAN FITUR</font></td>
</tr>
<tr>
<td width="31"align="center">No</td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"> </td>
<td width="208" align="center">Fitur</td>
<td rowspan="10" style="border-left:#000000 solid thin;padding-left:-5px;" width="0"> </td>
<td width="92" align="center">Enterprise</td>
<td width="0" rowspan="10" style="border-left:#000000 solid thin;"> </td>
<td width="0"align="center">Pro</td>
<td width="0"align="center">Free</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">1</td>
<td>Garansi seumur hidup </td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">2</td>
<td>Multiuser</td>
<td align="center">X</td>
<td align="center">-</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">3</td>
<td>Update otomatis </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">4</td>
<td>Cetak Laporan </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">-</td>
</tr>
<tr>
<td align="center">5</td>
<td>Notifikasi error </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
<tr>
<td align="center">6</td>
<td>Ubah tema </td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td align="center">7</td>
<td>Try ikon</td>
<td align="center">X</td>
<td align="center">X</td>
<td align="center">X</td>
</tr>
<tr>
<td colspan="8" style="border-top:#000000 solid thin;"></td>
</tr>
</table>
<BR><a href="Tugas1.html">Back</a> Kembali Ke Halaman Utama
</body>
</html>
silahkan anda coba lagi...
^_^
NB: -Untuk tulisan berjalan dan tulisan blinknya anda bisa menambahkan source code merquee dan blink...
-Agar kedua halaman web (Tabel 1 dan 2) bisa dikaitkan maka sudah saya tambahkan Link agar bisa bolak balik kehalamn 1 dan ke halaman ke-2
DesainTabel Dengan Pengelompokan
.
Langganan:
Posting Komentar (Atom)
The ReaL GeJe ^^
KHASSIFA SI BINTU NAHL
0 komentar:
Posting Komentar