Senin, 27 September 2010

CONTOH MEMBUAT TABLE PERBANDINGAN

MEMBUAT TABLE PERBANDINGAN
 <!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>Perbandingan Berbasis Tabel 2</title>
</head>
<body>
<table width="500" height="500" border="0">
  <tr>
    <td colspan="10" style="border-bottom:#000000 solid;"><p align="center"><font color="black"   
    face="TIME NEW ROMAN" size"6">PERBANDINGAN FITUR</font></td>
  </tr>
  <tr>
    <td align="center">No</td>
    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td width="200" align="center">Fitur</td>
    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td align="center">Enterprise</td>
    <td rowspan="10" style="border-left:#000000 solid thin;">&nbsp;</td>
    <td align="center">Pro</td>
    <td align="center">Free</td>
  </tr>
  <tr>
    <td colspan="10" 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;"></td>
  </tr>
</table>
</body>
</html>
DENGAN HASIL YANG DIPEROLEH SEPERTI GAMBAR DI BAWAH INI
Diposting oleh di Tidak ada komentar:

HTML LANJUTAN

PENFORMATAN TABLE
Untuk menformat table dapat menggunakan beberapa atribut  dibawah ini :

    * align : berfungsi untuk mengatur posisi rata kiri (left), tengah (center) atau kanan (right).
    * cellpadding : digunakan untuk mengatur spasi antar border sel dengan isinya.
    * cellspacing : digunakan untuk mengatur spasi antar sel.
    * width : digunakan untuk menentukan lebar tabel atau sel.
    * Merge : digunakan untuk penggabungan sel.
    * Rowspan : untuk menggabungkan sel berdasarkan baris.
    * Cospan : untuk menggabungkan sel berdasarkan kolom.
    * Colgroup : digunakan untuk mengelompokkan berdasarkan kolom.
    * Tbody : untuk mengelompokkan berdasarkan kolom.
    * Height : untuk menentukan ukuran tinggi sel.
    * Nowrap : digunakan untuk membuat isi dari kolom tetap berada pada satu baris.

<!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 Berbasis Tabel 1</title>
</head>
<body>
<table width="550" height="250">
  <tr>
    <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000
solid;"><b>Perusahaan</td>
    <td colspan="7" style="border-top:#000000 solid;border-bottom:#000000 solid;"><b>Pendapatan</td>
  </tr>
  <tr >
    <td width="175" >Angin Reebot Ltd </td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td width="25"></td>
    <td colspan="6" bgcolor="#006712"></td>
    <td width="25">+150%</td>
  </tr>
  <tr>
    <td>Command Prompt, Inc </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td colspan="4" bgcolor="#006712"></td>
    <td width="25">+55%</td>
    <td width="25"></td>
    <td></td>
  </tr>
<tr>
    <td>Hibernate Ltd </td>
    <td></td>
    <td></td>
    <td></td>
    <td>-23%</td>
    <td colspan="2" bgcolor="#FFE900"></td>
    <td width="15"></td>
    <td width="15"></td>
    <td width="15"></td>
    <td width="15"></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>Shutdown Ltd </td>
    <td></td>
    <td>-75%</td>
    <td colspan="4" bgcolor="#FF0120"></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="18" style="border-top:#000000 solid"></td>
  </tr>
</table>
</body>
</html>
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)