Dl, Dt, Dd Dalam Layout Tabel

Published by Concept Phone Sabtu, 04 Agustus 2018

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

Sumber https://www.dte.web.id/