CSS Layout atau Table Layout

Isu tentang layouting dalam desain Web yang akhir-akhir ini mencuat (setelah hadirnya CSS2), adalah penggunaan CSS untuk mendesain layout dan tampilan pada sebuah situs Web. Kedua teknik ini memiliki kelebihan dan kekurangan masing-masing. Pada artikel ini kita akan membahas mengenai Aksesibilitas dan kapabilitas Browser dalam menampilkan dua tipe desain ini.

Penggunaan Tabel
Tabel telah lama kita kenal sebagai tag yang dipergunakan untuk membuat layout sebuah Web. Karena kemudahannya, penggunaan tabel lebih disukai untuk membuat layout situs menggunakan WYSIWYG Editor seperti Dreamweaver atau Frontpage.

Fakta Menggunakan Tabel:

• Lebih mudah untuk digunakan dibandingkan dengan CSS Layout
• Proses desain layout tabel lebih mudah menggunakan editor WYSIWYG seperti Dreamweaver atau Frontpage
• Tabel dapat “rusak” dalam beberapa browser yang biasa kita gunakan, yang menyebabkan disfungsi dalam layout.
• Meningkatkan jumlah tag HTML yang tidak perlu, hingga akan menaikan ukuran file.

Kini, tabel telah digunakan pada banyak halaman Web yang online di internet, yaitu sekitar 95% menggunakan tabel untuk layouting. Biasanya, kita mendapati tabel pada situs-situs dengan konten yang “berat” seperti situs Portal, atau pada situs yang lebih sederhana seperti pada situs-situs perusahaan korporat atau pendidikan.

Dari sekian banyak isu dari penggunaan tabel, yang paling “mengancam” adalah mengenai kompabilitas browser baik itu bagi pengguna mapun bagi developer Web. Dari sekian banyak browser yang beredar diantaranya adalah Internet Explorer, Netscape, Mozilla, dan Opera yang memiliki cara kerja yang berbeda. Hal ini berarti pengetesan harus dilakukan untuk mengetes kompabilitas desain pada browser-browser tersebut.

Selain itu, menggunakan tabel untuk layout biasanya menggunakan editor WYSIWYG yang biasanya menghasilkan tag-tag yang tidak perlu dipergunakan yang akhirnya meningkatkan besar File.

Penggunaan Tabel dan Aksesibilitas
Penggunaan tabel mengakibatkan beberapa kelemahan terhadap aksesibilitas bagi orang-orang dengan “handicap” atau cacat. Para penyandang cacat yang menggunakan screen reader, speech output browser, braile browser, dan browser teks, akan mengalami kesulitan dalam membaca tabel. Bila dalam sebuah situs Web terdapat tabel seperti ini:SEL1 SEL2
Keterangan sel1 Keterangan sel2

dan kodenya akan tampak seperti:

SEL1	SEL2
Keterangan sel1	Keterangan sel2

Pada browser teks atau yang dipergunakan oleh penyandang cacat, akan membaca tabel dengan cara membaca tag dari atas kebawah hingga tidak menghasilkan aliran baca yang seharusnya. Dimana seharusnya setelah membaca SEL1 maka browser membaca Keterangan sel1 yang berada di bawahnya, begitu pula ketika membaca SEL2. Namun dengan penggunaan tabel, browser akan membaca SEL1, SEL2, Keterangan sel1 dan keterangan sel2. Bila terdapat tabel yang lebih panjang, maka si pengguna browser akan kebingungan. Belum lagi penggunaan tabel di dalam tabel yang akan lebih menyulitkan untuk membacanya.

Cara membaca tabel setiap browser berbeda-beda, pada browser-browser seperti Netscape dan IE akan menampilkan isi tabel dihalaman Web begitu ditemukan tag penutup dari tabel. Hal ini tentu akan terkesan bahwa situs terasa lambat dan berat.

Penggunaan CSS
CSS dikenal sebagai alat untuk memformat tampilan pada halaman HTML, namun kini dengan muculnya CSS2 dan dukungan browser-browser terbaru, CSS sering dipergunakan untuk pemposisian dan layouting halaman Web.

Fakta Menggunakan CSS:

• Telah didukung oleh kebanyakan browser versi baru, tapi tidak didukung oleh browser-browser versi lama.
• Lebih fleksibel dalam penempatan posisi layout.
• Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran file.
• Dapat menampilkan konten utama terlebih dahulu, sementara gambar dan lain-lain dapat ditampilkan sesudahnya.

Walaupun demikian, pada browser-browser lama, atau CSS di-disable pada browser pengunjung masih dapat membaca dengan baik situs tersebut, dikarenakan cara membaca browser yang secara bertahap dari atas ke bawah, dari kiri ke kanan.

Selain itu, penggunaan CSS pada file terpisah, dapat mempermudah pengubahan tampilan pada situs secara keseluruhan.

Penempatan konten yang lebih fleksibel, pada source code seorang developer dapat menempatkan konten yang penting pada bagian atas, sementara konten yang memerlukan waktu download seperti image atau animasi flash pada bagian bawah, namun tidak mengubah tampilan.