Stacking <dt> and <dt> in a multiple column, multiple row <dl>

Question

Is it possible to get this look

from this code (using CSS?)

<dl>
<dt>Latitude</dt>
<dd>50.0</dd>
<dt>Longitude</dt>
<dd>100.0</dd>
<dt>h (metres)</dt>
<dd>0.000</dd>
<dt>Vφ (mm/y)</dt>
<dd>-6.4</dd>
<dt>Vλ (mm/y)</dt>
<dd>-15.3</dd>
<dt>Vh (mm/y)</dt>
<dd>-2.0</dd>
</dl>

Just to be clear, I don't care about the colors. It's the having the dt/dd pairs stacked with multiple columns and multiple rows that's important to me. I can get the look I want with a table, but it fails my accessibility criteria. I think a is semantically closer to what I want... it's really a list of key/value pairs.

Here are the colors I'm using though:

dl {border: 1px solid #C8C8C8;}

dd {border: 1px solid #C8C8C8; background-color: #F0F0F0;}

Answer 1

Here is a basic solution, looks terrible, but with that structure you should be able to improve it after your requirements:

Fiddle

CSS:

dl {
    float: left;
    display: block;
    width: 400px;
}

dl dd {
    float: left;
    margin-left: -35px;
    margin-top: 20px;
    width. 100px;
    background-color: #e0e0e0;
    border: 1px solid #777777;
    padding: 5px;
    position: relative;
    display: block;
}
dl dt {
    float: left;
    width. 70px;
    position: relative;
    display: block;
}

Answer 2

There's nothing inherently inaccessible about tables. It's only when they're used for display rather than for expressing tabular data that it is a problem. You do have tabular data, it just happens to have 2 columns. Just because it is a 2-column 6-row table doesn't mean it has to look like one.

http://jsfiddle.net/hgWxT/

table, tbody {
    display: block;
}

tr {
    display: inline-block;
    width: 30%;
}

td, th {
    display: block;
}

<table>
    <tr>
        <th>Latitude</th>
        <td>50.0</td>
    </tr>

    <tr>
        <th>Longitude</th>
        <td>100.0</td>
    </tr>

    <tr>
        <th>h (metres)</th>
        <td>0.000</td>
    </tr>

    <tr>
        <th>Vf (mm/y)</th>
        <td>-6.4</td>
    </tr>

    <tr>
        <th>V? (mm/y)</th>
        <td>-15.3</td>
    </tr>

    <tr>
        <th>Vh (mm/y)</th>
        <td>-2.0</td>
    </tr>
</table>

Answer 3

yes, it's possible. Andy Clark is fond of using various lists and I've used dl's many times.

You just treat it like an ol/ul. Remove the margin/padding first.

Assign a class to the dt's, float them but you'll have to assign a different class to the second row. Sometimes not as if the width of the container of the DL is set, the dt's will wrap around but to really control the second row of dt (V (mm/y) and -6.4 ..that row) you can assign another class and style.

Answer 4

Possible? Yes, but needlessly difficult.

Far, far, easier is to just wrap each dt / dd group of in an element, and style accordingly. Here's your example completed: http://cssdeck.com/labs/jsqdknho