Saturday, October 3, 2009

Pemakaian Div dan Tabel Dalam Web Design

Dalam mendesign sebuah web site, seringkali terjadi argumentasi tentang mana yang lebih baik memakai mark up div atau table. Apabila kita mendesign website dari awal dengan menggunakan software maka hampir pasti layout yang dibuat akan menggunakan table yang tentu saja sudah ketinggalan zaman dan sangat tidak serach engine friendly, bahkan Adobe Dreamwever CS3 masih menggunakan layout berdasarkan table.

Dalam praktek web design saat ini, banyak kecendrungan terjadi untuk mengganti semua table tag dengan div tags. Dalam banyak hal, memakai table tag akan menghasilkan lebih sedikit tags daripada menggunakan div. Dalam mendesign layout sebuah website, pemakaian div akan sangat lebih baik daripada table. Tidak ada satu search engine pun yang menghukum sebuah halaman karena terlalu banyak menggunakan div tags, ini bertolak belakang dengan pemakaian HTML tabel tags untuk layout.

Banyak sekali kekurangan dari pemakaian table tag untuk layout seperti kesulitan untuk mencetak halaman web, tidak bersahabat untuk dilihat dengan mobile device hingga sulitnya bernavigasi dalam halaman web yang menggunakan table bagi pengguna screen reader. Para pengguna screen reader seringkali harus berhadapan dengan mesin yang menyebutkan “tabel dengan 5 kolom dan lima baris etc etc” yang tentu saja sangat mengganggu dan tidak mudah dimengerti. Tetapi apabila menggunakan div tags, hal tersebut dapat dihindari karena secara default screen reader tidak membaca div tags hingga isi dari table tersebut dapat didesign sedemikian rupa sehingga dapat dimengerti oleh para pemakai screen reader.

Dengan memakai HTML table tags, search engine akan selalu mendapatkan struktur yang benar karena tiap kolom akan berelasi secara benar dengan kolom yang lain dan hal ini tidak terjadi dengan memakai div tags. Hal in menyebabkan table tags sangat tidak efesien untuk menjabarkan design layout sebuah website.

Lebih Jauh tentang pemakain div dan table dalam web design

  ©Blogspot Design By Pensil Warna Design.

TOPO