DL, DT, DD dalam Layout Tabel
Sebagai catatan, perpanjangan dl
sebagai definition list pada HTML4 telah diganti menjadi description list pada HTML5 — HTML5 Doctor - The DL Element
HTML
<dl class="member-details">
<dt>Nama:</dt>
<dd>Lulu Tralala</dd>
<dt>Usia:</dt>
<dd>17</dd>
<dt>Jenis Kelamin:</dt>
<dd>Wanita</dd>
<dt>Lahir:</dt>
<dd>14 April 1992</dd>
<dt>Alamat:</dt>
<dd><em>Belum dilengkapi</em></dd>
<dt>Keterangan:</dt>
<dd>Lorem ipsum dolor sit amet...</dd>
</dl>
CSS
.member-details {
margin:0 0 1.7em 0;
padding:0 0;
overflow:hidden;
}
.member-details dt,
.member-details dd {
margin:0 0 2px 136px;
padding:5px 7px;
background-color:#eee;
}
.member-details dt {
background-color:#BC4106;
float:left;
font-weight:bold;
width:120px;
clear:left;
margin-left:0;
}
2 Komentar
Unknown
Pertamax...
Hehe, mas taufik ni baru mulai ngeblogging lagi nie, ru punya komputer koh hehe :D
Eh, ru pertama buka blognya Mas Taufik udah punya domain sendiri nie, hebat hebat \o/
moosatvmp3
inspirasi buat tampilan di homepage nih thx ya mas, inspirasi bgt nih semua tutorial.a