Dilema Layout Tanpa Tabel (Tableless Layout)

Dunia web 2.0 membawa teknologi baru dalam hal layouting tampilan, yaitu layout tanpa tabel (tableless layout) dengan menggunakan CSS (Cascading Stylesheet). Keunggulan CSS dibandingkan dengan tabel adalah pada fleksibilitasnya. Dengan topografi yang sama, desain bisa dirombak secara dramatis hanya dengan mengubah stylesheet-nya. Contohnya, layout-layout WordPress dan Joomla yang begitu mudah diubah dengan berbekal stylesheet dan dengan sedikit modifikasi pada topografi desain.

Komponen utama CSS adalah floating-div. Setiap kotak div bisa dilempar kesana kemari, tumpah ke kiri atau ke kanan, bertumpuk-tumpuk sesuka hati. Dengan kemampuan seperti ini, desainer web bisa mengeksplorasi desain web yang tidak terbatas pada layout konvensional: bagian navigasi situs di kiri/kanan, halaman utama mendapat porsi yang lebih besar di sebelah bagian navigasi situs. Kalau Anda menyempatkan diri berkunjung ke situs CSS Mania, Anda akan menemukan berbagai desain yang begitu kreatif memanfaatkan kehebatan CSS.

Bukan berarti tabel tidak bisa menampilkan desain yang aneh dan kreatif. Tetap bisa, tetapi terbatas. Sifat tabel adalah kaku. Kalau ia sudah diam di suatu tempat, ia akan tetap diam di situ tidak akan bisa digeser oleh siapapun termasuk Javascript. Atribut tabel yang bisa dinamis dikendalikan oleh script sangat sedikit, terbatas pada warna dan font, bukan pada tata letak, posisi, dan lebarnya.

Kedinamisan CSS membawa petaka: konsistensi tampilan di setiap browser yang berbeda. Kekakuan tabel membawa keuntungan: konsistensi tampilan di setiap browser yang berbeda.

Saya selalu kagum pada desainer web CSS. Kemampuan untuk tetap konsisten di browser yang berbeda-beda (minimal IE, Firefox, Opera, dan Safari) adalah sesuatu yang sulit dilakukan. Ketidak-standar-an dalam menerjemahkan kode-kode CSS jauh lebih parah daripada ketidak-standar-an Javascript. Di Firefox tampil cantik, di IE porak-poranda. Di IE sudah tampil memukau, di Firefox kacau balau. Demikian seterusnya. Melakukan kodifikasi dengan CSS adalah mimpi buruk bagi desainer web bau kencur seperti saya. Belum lagi kalau sudah dikejar-kejar deadline.

CSS bukan pilihan kalau kita dikejar deadline yang sempit: katakanlah dalam dua hari Anda harus menyelesaikan sebuah website. Saya tidak berani melakukan hal itu dengan CSS.

Tentu saja, saya akan lari ke tabel. Dengan tabel, kita tak perlu pusing-pusing dengan masalah kompabilitas antar browser. Konsentrasi dengan apa yang kita kerjakan. Apa yang perlu ditampilkan. Apalagi kalau ada tool dahsyat Adobe Photoshop dan Macromedia Adobe Dreamweaver. Pekerjaan desain web dalam waktu dua hari bukanlah sesuatu yang mustahil dilakukan. 🙂

Published
Categorized as Desain Web

By Galih Satriaji

Bookaholic, Workaholic. Chubby. That's me!

11 comments

  1. #tukang foto keliling:
    tergantung yang membangun layout utama apa. maksudku siapa yang membagi porsi atas/bawah/kanan/kiri dari halaman web. kalau itu dilakukan oleh div, berarti tableless. kalau tag pertama setelah body adalah table, berarti ya.. bukan tableless.

  2. sampe sekarang kalo bikin web saya masih main tabel.. kecuali kalo modif template, ya ngedit css dikit2 sih bisa :mrgreen: tapi kalo bikin dari nol masih blank…………..

    mungkin kendala CSS yang tidak WYSIWYG ketika mendesain tampilan… [harus RUN baru kelihatan hasilnya]

    hm… jadi sekarang ini web designer harus ngerti ginian juga ya cak? dulu modal photoshop kan dah cukup 😉 trus urusan fungsionalitas web ya serahkan ke programmernya :LOL:

  3. #det:
    yap, saya kira seorang web designer harus mengerti tentang teknologi HTML agar ia bisa menghasilkan desain yang “ramah programmer”.

    #dnial:
    yeah, setuju 😀

    #nike:
    semangat!

  4. memang css ribet di crossbroswer….
    pernah kepala dibuat pusing gara2 client dengan perbedaan 1px kegeser keatas untuk broswer firefox pada MAC OS(untuk windows udah fixed), client ngak mau tahu…dia maunya fixed untuk semua broswer baik di windows maupun os lain….
    2 jam baru bisa fixed……

Leave a comment

Your email address will not be published. Required fields are marked *