collected pixels: Modul 2 Komponen HTML Lanjut (2)

Untuk komponen HTML lanjut berikutnya adalah membuat desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan.
Pembuatan desain tabel ini menggunakan kode HTML seperti halnya membuat tabel biasa, namun dengan modifikasi pada beberapa bagian.

Tabel ini terdiri dari beberapa kolom dan baris. Pada baris ke 6, diberikan tambahan garis horizontal yang tergabung menjadi satu kesatuan dengan tabel. Screen shoot tampilan halaman web desain tabel dapat dilihat pada gambar di atas.

Untuk membuat tampilan seperti pada screen shoot di atas, kode HTML yang harus dimasukkan adalah sebagai berikut.

<!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" xml:lang="en" lang="en"> <br /> <br /> <head> <br />   <title>Grafik Berbasis Table</title> <br />   <style type="text/css">  </style><br /> </head><br /> <br /> <body><br /> <table width="45%" border="0" cellpadding="0" cellspacing="0" ><tr align="center"> <th colspan="5" bgcolor="#FFFFFF" ><strong>PERBANDINGAN FITUR </strong></th> </tr> <tr align="center"> <th width="32" height="23" bgcolor="#FFFFFF" class="atasbawah" >No. </th> <th width="210" class="ataskiribawah" >Fitur </th> <th width="112" class="ataskiribawah" >Enterprise </th> <th width="39" class="ataskiribawah" >Pro </th> <th width="49" class="atasbawah" >Free </th> </tr> <tr> <td>1</td> <td class="kiri">Garansi seumur hidup</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">-</td> <td align="center">-</td> </tr> <tr> <td>2</td> <td class="kiri">Multiuser</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">-</td> <td align="center">-</td> </tr> <tr> <td>3</td> <td class="kiri">Update Otomatis</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">X</td> <td align="center">-</td> </tr> <tr> <td>4</td> <td class="kiri">Cetak Laporan</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">X</td> <td align="center">-</td> </tr> <tr> <td class="bawah">5 </td> <td class="kiribawah">Notifikasi Eror </td> <td align="center" class="kiribawah">X </td> <td align="center" class="kiribawah">X </td> <td align="center" class="bawah">X </td> </tr> <tr> <td height="19">6</td> <td class="kiri">Ubah Tema</td> <td align="center" class="kiri">X</td> <td align="center" class="kiri">X</td> <td align="center">X</td> </tr> <tr> <td class="bawah">7</td> <td class="kiribawah">Try Icon</td> <td align="center" class="kiribawah">X</td> <td align="center" class="kiribawah">X</td> <td align="center" class="bawah">X</td> </tr> </table></body><br /> </html><br />

collected pixels

Pages

Rabu, 24 Februari 2010

Modul 2 Komponen HTML Lanjut (2)

Tidak ada komentar:

Posting Komentar