Question

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>

Answer 1

Why not just put an <h2> or <h3> tag above the <dl>? It would be more semantically correct.