Home » , , , » DL, DT, DD dalam Layout Tabel

DL, DT, DD dalam Layout Tabel

Definition List/Description List

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;
}

Demo

0 komentar:

Posting Komentar