Sekarang ini trend desain web adalah tanpa table alias tableless. Mengapa tableless? katanya sih load-nya jadi lebih ringan dibanding dengan table (saya sendiri belum ngebuktiin seberapa besarkah perbedaannya). Selain itu mendesain sebuah web tanpa table jauh lebih fleksibel karena kita bisa memindahkan kolom dari kanan ke kiri atau sebaliknya dengan hanya mengubah CSS-nya tanpa mengubah code HTML-nya.
Salah satu komponen dalam sebuah halaman web adalah form isian. Nah bagaimana membuat form isian tanpa table. Berikut adalah contoh bagaimana membuat form isian tanpa table menggunakan CSS.
Kode CSS
<style type="text/css"> body{font-family:Arial, Helvetica, sans-serif; font-size:12px;} label{float:left; width:150px; font-weight:bold;} input, textarea, select{margin-bottom:10px; border: 1px solid #b9c7b0; padding:3px;} input, textarea{width:330px;} textarea{height:100px;} small{display:block; padding-left:150px;} .checkbox{width:2em; border:none; padding:0; margin:0;} .button{margin-left:150px; margin-top:15px; width:120px; font-weight:bold; background:#2B5401; color:#fff; font-size:14px;} br {clear:left;} </style>
Kode HTML
<h2>Contoh Form tanpa table menggunakan CSS</h2> <form action="" method="post"> <label for="name">Nama</label> <input type="text" name="name" id="name" /><small>Wajib diisin</small><br /> <label for="email">Email</label> <input type="text" name="email" id="email" /><small>Wajib diisin</small><br /> <label for="comment">Komentar</label> <textarea name="comment" id="comment" rows="5" cols="100"></textarea><small>Wajib diisin</small><br /> <label for="aggree">Setuju dengan Terms</label> <input type="checkbox" name="aggree" id="aggree" class="checkbox" /><br /> <input type="submit" name="task" value="Submit" class="button" /> </form>
Dan hasilnya dapat dilihat disini.
4 Comments
Ini yang saya cari, tapi kalo mo di pasang di wordpress gimana?
Maksih yah.
E lupa, salam kenal yah
@kang toto
kalo nambahin ke wordpress.com kurang begitu ngerti kang.
ngomong2 nambahinnya buat apa dulu nih?
hmmmm…… mana lebih baguspake css dan tabeless dari pada pake tabel?
dua-duanya bagus menurut saya, css dan tableless lebih modern daripada menggunakan tabel, dan isunya css dan tableless lebih cepet di render oleh browser daripada table.