Simple Tableless Layout

It has been advocated many times that tables shouldn’t be use in HTML for layout purposes

Kalimat diatas dikutip dari http://www.w3.org/2002/03/csslayout-howto.

Dalam tulisan kali ini, saya akan mencoba memberikan sedikit ulasan tentang cara membuat layout web sederhana tanpa menggunakan tabel. Disini saya akan mencoba menggunakan kemampuan dari Cascading Style Sheet (CSS).

Misalnya halaman web dibagi menjadi beberapa bagian mendasar, yaitu:

1. Header, berisi judul utama, dapat juga merupakan banner atau logo dari web tersebut.
2. Left, merupakan bagian sebelah kiri dari halaman web, biasanya diisi dengan menu-menu utama sebagai navigasi.
3. Right, mirip dengan bagian Left, namun biasanya bagian ini digunakan untuk informasi-informasi singkat, menu-menu cepat (shortcut), dll.
4. Content, bagian utama dari halaman web, berisi rincian, ringkasan, atau informasi utama yang akan disampaikan ke pengunjung web.
5. Footer, biasanya berisi informasi dari pembuat web.

Setelah halaman web dibagi menjadi beberapa bagian mendasar, selanjutnya dibuat definisi dari setiap bagian dengan menggunakan CSS. Contohnya adalah sebagai berikut ini:

1. Header

   #header_wrapper
   {
   border-style:dashed;
   border-width:1px;
   margin-bottom:0px;
   }

   #header
   {
   margin:10px;
   }

2. Left

   #left_wrapper
   {
   float:left;
   width:200px;
   border-style:dashed;
   border-width:1px;
   height:450px;
   }

   #left
   {
   margin:10px;
   }

3. Right

   #right_wrapper
   {
   float:right;
   width:150px;
   border-style:dashed;
   border-width:1px;
   height:450px;
   }

   #right
   {
   margin:10px;
   }

4. Content

   #content_wrapper
   {
   border-style:dashed;
   border-width:1px;
   margin: 0 150px 0 200px;
   height:450px;
   }

   #content
   {
   margin:10px;
   }

5. Footer

   #footer_wrapper
   {
   clear:both;
   border-style:dashed;
   border-width:1px;
   }

   #footer
   {
   margin:5px;
   text-align:center;
   font-size:8pt;
   }

Setelah mendefinisikan CSS untuk layout halaman web, kemudian definisi CSS tadi digunakan pada kode-kode HTML pembentuk halaman web yang akan dibuat. Berikut ini merupakan contoh penggunaan definisi CSS yang telah dibuat sebelumnya.

<div id=”main”>
<div id=”header_wrapper”>
<div id=”header”>
<h1>Header</h1>
</div>
</div>
<div id=”left_wrapper”>
<div id=”left”>
Left
</div>
</div>
<div id=”right_wrapper”>
<div id=”right”>
Right
</div>
</div>
<div id=”content_wrapper”>
<div id=”content”>
Content
</div>
</div>
<div id=”footer_wrapper”>
<div id=”footer”>
Footer
</div>
</div>
</div>

Silahkan download kode lengkapnya.