Membangun template sederhana (table)

Di buku lama, untuk membuat sebuah template kita memulai dari table.Table adalah salah satu tag sederhana yang harus kita ketahui terlebih dahulu. Tetapi dalam prosesnya penggunaan table sangat tidak di anjurkan dalam membuat template.

Untuk mudahnya mari membuat template sederhana dengan script sebagai berikut:

<table width="100%" border="1" bgcolor="lightblue">
<tr><td colspan=2>HEADER&nbsp;</td></tr>
<tr><td width=30%>Menu&nbsp;</td><td width=70%>Content web&nbsp;</td></tr>
<tr><td colspan=2>Footer&nbsp;</td></tr>
</table>

---

Hasil:

HEADER
Menu	Content web
Footer

Bila diperhatikan, table di atas masih terdapat lowong di antara sisinya. Untuk menghilangkan kita dapat memanfaatkan cellspasing dan cellpadding

HEADER
Menu	Content web
Footer

Kita dapat melihat perbedaannya disini. Tetapi hal yang perlu diketahui, table tidak disarankan untuk digunakan dalam membuat design. Saran yang terbaik adalah div. Menggunakan DIV akan dijelaskan di artikel berikutnya, di artikel ini akan lebih memfokuskan pada table.

Manfatkan table untuk merancang dasarnya walaupun nanti akan berubah bentuknya saat di ubah menjadi div. Menurut tampilan di atas, kita akan mendapati bahwa site yang kita buat ini terdiri dari 4 bagian yaitu

• Header. Tempat dimana judul bahkan menu yang sering tampil di atas muncul. Untuk menu seperti halnya browser yang kita gunakan atau word yang kita pakai. Tidak selalu harus hadir dalam bentuk tulisan, dapat pula icon. Karena icon sebenarnya lebih mudah dan cepat dimengerti. Tapi untuk user yang mungkin tidak memahami apa manfaatnya, berikan icon tersebut judul atau pop-up yang menjelaskan judulnya, misalnya "home". Di beberapa site menu biasanya diletakkan di atas tidak di samping kiri/kanan. Dan menu biasanya memanfaatkan drop down menu.
• Menu. Lebih tepatnya disebut menu kiri karena posisinya di kiri. Selain berisi judul, dapat pula berisi login dan lain-lain. Tetapi sayangnya terkadang lebarnya terlalu pendek dan perlu di customize. Seperti tulisan di atas, disarankan memanfaatkan icon pada menu selain menulis nama menu itu sendiri. Menu ini juga disarankan memakai dropdown dibandingkan memanfaatkan list menu karena ada kemungkinan list menu akan menambah panjang/lebar dari menu ini sendiri.
• Content web. Tempat dimana tulisan yang paling sering muncul dan hadir
• Footer. Kaki dari site, footer ini wajib ada walau dalam prosesnya mungkin tidak pernah dibaca oleh user. Footer diharuskan memiliki minimal:
• About
• copyright
• menu penting. Menu ini dimaksudkan bila user telah sampai bawah dan ingin ke home, mereka bisa menekan dibawah tidak perlu scrool ke atas.
• twitter dan facebook
• policy

Apabila anda melakukan slice dari psd (biasanya bekerja dari PSD), bentuk HTML-Table inilah yang akan anda terima dahulu. Lalu tugas berikutnya ubah menjadi div. Pemakaian DIV tidak sendiri, harus memanfaatkan css. Penggunaan table juga memakai Css tetapi css itu akan dibahas di artikel berikutnya.

---

contoh dropdown menu:

di aplikasi dekstop

di browser

Source:
Nurul Fikri.