I have a <dl> and I would like to add a header to it.
My first attempt is not successful - I don't know how to get the <dt> header to span both the subsequent <dt> and <dd> elements.
<style>
dl.table-display{
float: left; width: 100%;
margin: 1em 0;
padding: 0;
font-family: verdana,arial,helvetica,sans-serif;
font-size: 13px;
line-height: 20px;
}
dt.list_header {
text-align: center;
color: white;
width:100%;
background-color: #3061B7;
}
.table-display dt{
clear: left;
float: left;
width: 50px;
margin: 0;
padding: 5px;
}
.table-display dd{
float: left;
width: 50%;
margin: 0;
padding: 5px;
}
</style>
<dl class="table-display">
<dt class="list_header">Header</dt>
<dt>Name</dt>
<dd>Title</dd>
<dt>Name</dt>
<dd>Title</dd>
<dt>Name</dt>
<dd>Title</dd>
<dt>Name</dt>
<dd>Title</dd>
</dl>