Perbedaan Layout Div CSS dengan Layout Web Tabel

Untuk membuat layout website dapat kita gunakan dua format elemen yaitu Table HTML dan CSS Div yang masing-masing memiliki kelebihan dan kekurangan.

Berikut perbandingan kelebihan dan kekurangan masing-masing.

1.Elemen Tabel
Elemen ini memiliki prototipe yang diawali tag “table”, yang dapat diperluas style nya di tiap class nya baik dari segi color, background, dll.

Kelebihan menggunakan elemen tabel :

  • Cocok untuk layout yang berbentuk kolom seperti pada layout surat kabar
  • Mudah dipahami dan dimaintain karena sistematis
  • Relatif mudah jika ingin mengubah yg bersifat parsial
  • Tingkat presisi posisi elemen lebih tinggi
  • Kompatibel dengan kebanyakan browser

Kekurangan menggunakan elemen tabel :

  • Ukuran file lebih besar sehingga loadnya lebih lama
  • Bandwidth yang dibutuhkan besar maka dampaknya pada biaya jaringan dan hosting
  • Karena sistematis, maka search engine spider harus membaca secara berurutan sehingga membutuhkan waktu yang lebih lama

2.Elemen Div
Elemen berbasis CSS ini bersifat “float” sehingga bisa diletakkan dimana saja dengan mudah dalam page layout . Ditandai dengan tag ” div”

Kelebihan menggunakan elemen div :

  • Cocok untuk layout yang kompleks
  • Ukuran pengembangan style lebih sederhana sehingga ukuran file lebih kecil dibanding layout yang sama menggunakan elemen tabel
  • Cocok untuk desain template
  • Karena ukuran file kecil maka load nya lebih cepat, sehingga biaya menjadi lebih murah
  • Pada elemen div kita dapat membuat eksekusi yang bersifat “important”, sehingga spider search engine dapat mengeksekusi terlebih dahulu tanpa harus berurutan. Jadi lebih “ramah” search engine

Kekurangan menggunakan elemen div :

  • Memerlukan ketelitian tinggi dalam menuliskan tag tag div terutama lay out kompleks
  • Tidak kompatibel dengan beberapa browser sehingga perlu membuat custom nya
  • Tingkat presisi posisi setiap elemen lebih rendah dibanding elemen tabel sehingga maintainance lebih sulit, apalagi jika sering dilakukan perubahan layout. Dengan kata lain lebih mudah menata di awal dibanding melakukan revisi parsial

Dengan kelebihan dan kekurangan masing-masing, maka pilihan kembali pada tujuan dan kebutuhan pengguna. Untuk pemrograman layout yang sederhana, kedua elemen menunjukkan kinerja loading yang relatif sama bergantung pada jaringan operator yang digunakan.

Mungkin ada juga yang menggunakan keduanya (website hibrida) dalam satu paket layout untuk sekaligus mendapatkan keramahan search engine dan kompatibilitas browser-browser pengguna terbanyak, silakan bereksperimen.

Baca Juga :

20121229-053117.jpg
  • Tools Pendukung Desain Blog Cantik
  • Cara Mudah Dan Gratis Mengubah Layout Blog
  • Manajemen Gadget
  • Posted via DraftCraft app

    Tagged: , , , ,

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

    %d bloggers like this: