DL, DT, DD dalam Layout Tabel

Tabel Konten
  1. HTML 
  2. CSS 
  3. Demo 
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 

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

Komentar telah ditutup.