Desain Tabel Perbandingan dengan Menggunakan HTML ~ Dream's Zone

Dalam pemrograman web HTML, kita dapat membuat desain tabel perbandingan item dengan memanfaatkan fitur pengelompokan. Caranya:

1. Buka Editor teks dan kemudian ketikkan:

<!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> Membuat grafik berbasis tabel 2 <table width="470" height="401" border="0"> <tr> <td colspan="8" style="border-bottom:#000000 solid;">PERBANDINGAN FITUR</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> </body> </html> 

2. Simpan dengan ekstensi .html
3. Eksekusi file tersebut sehingga tampilannya menjadi:

Dream's Zone

Rabu, Februari 24

Desain Tabel Perbandingan dengan Menggunakan HTML

0 comments:

Posting Komentar

Wahyu Penjual Mimpi

Labels

Ping Me!!

Blog Archive

pengunjung

Followers

Translate