DL, DT, DD dalam Layout Tabel

Saturday, February 2, 2013 Add Comment Edit

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