Replicating Table Layout With Semantic Definition List

HTML & CSS
1

I would like to replicate the presentation of this:


<table>
	<tbody>
		<tr>
			<td>Attribute</td>
			<td>Value</td>
			<td>Attribute</td>
			<td>Value</td>
		</tr>
		<tr>
			<td>Attribute</td>
			<td>Value</td>
			<td>Attribute</td>
			<td>Value</td>
		</tr>
		<tr>
			<td>Attribute</td>
			<td>Value</td>
			<td>Attribute</td>
			<td>Value</td>
		</tr>
		<tr>
			<td>Attribute</td>
			<td>Value</td>
			<td>Attribute</td>
			<td>Value</td>
		</tr>
	</tbody>
</table>

With a more semantic definition list.


<dl>
	<dt>Attribute</dt>
	<dd>Value</dd>
	<dt>Attribute</dt>
	<dd>Value</dd>
	<dt>Attribute</dt>
	<dd>Value</dd>
	<dt>Attribute</dt>
	<dd>Value</dd>
	<dt>Attribute</dt>
	<dd>Value</dd>
	<dt>Attribute</dt>
	<dd>Value</dd>
	<dt>Attribute</dt>
	<dd>Value</dd>
	<dt>Attribute</dt>
	<dd>Value</dd>
</dl>

I’ve tried floating, displaying things inline and I just can’t seem to replicate the presentational behavior of creating 4 columns that expand correctly via row. Is this this even possible with a definition list? Is this pretty much a case of its best to use a table even though the table isn’t the most semantic element for the job/desired layout? The other thing is I need to this to function in IE6 so CSS3 or table styles are out of the question. The main thing is that the value or attribute may be one or several lines long. So I need each row to correctly expand to the tallest call, just like the table. That seems to be the biggest issue with the definition list since nothing wraps each “row”. Any input is appreciated.

2

Hi,

Assuming you could constrain the width of each item so that only 4 fit in a row then you could use inline-block instead of floating to get equal height rows (although you won’t be able to add full length backgrounds).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
dl{
    border:1px solid #000;
    width:625px;
    margin:auto;
    padding:10px;
}
dt,dd{
    display:inline-block;
    width:148px;
    margin:0 0 10px;
    padding:5px 2px 0;
    vertical-align:top;
    border-top:1px dotted #ccc;
}
dd{border-right:1px dotted #666}
* html dt,* html dd{display:inline}
*+html dt,*+html dd{display:inline}

</style>
</head>

<body>
<dl>
    <dt>Attribute</dt>
    <dd>Value</dd>
    <dt>Attribute</dt>
    <dd>Value</dd>
    <dt>Attribute</dt>
    <dd>Value that runs over to two lines or so</dd>
    <dt>Attribute</dt>
    <dd>Value</dd>
    <dt>Attribute</dt>
    <dd>Value</dd>
    <dt>Attribute</dt>
    <dd>Value</dd>
    <dt>Attribute</dt>
    <dd>Value</dd>
    <dt>Attribute</dt>
    <dd>Value</dd>
</dl>
</body>
</html>
3

The data as presented automatically by definition is tabular – so why on earth would you be abusing a list to build it!?!

… and that’s EXACTLY what that would be; tag abuse and NON-SEMANTIC markup.

Sorry, one of my many pet peeves – The only thing worse than abusing a table for layout is abusing a list to be a table.

4

The “nothing wraps each row” thing is a big problem with definition lists. Is there a semantic reason why you have two sets of key-value pairs in a row, or is that just for looks?

One solution is a new dl for each set of 4 key-value pairs. That’s adding a lot of code though.

Going back to the table, if they were just two columns the scope=“row” on the first td of the row would give similar sematics as dd does to dt, but it does extend down the whole row so having two pairs in a row won’t work there. However tables have headers (th and in a thead) so possibly you could rely on a table head to label (additionally using scope=“col”) each key versus its value… but getting them to associate from key => value is harder.

I’m thinking if it’s imperative that the key-value relationship is the most important thing, then you’d have to use the extra code of individual dl’s rather than one, wrap them in a box (likely a div) and use display: table on that, display: table-row on the dl’s, and display: table-cell on the dt’s and dd’s to get the visual setup you want. With completely different CSS for IE6 and 7 of course :confused:

If there was a way in a table to use th without it also pertaining to others in its column then
<tr><th>Attribute</th><td>value</td> <th>Attribute</th><td>value</td></tr>

<tr><th>Attribute</th><td>value</td> <th>Attribute</th><td>value</td></tr>

<tr><th>Attribute</th><td>value</td> <th>Attribute</th><td>value</td></tr>

would work, but so far as I know the th’s header-ness also applies down the column too. So that’s out.

If by “semantics” you’re particularly worried about, say, screen readers, this would be, as a table, a “complex table” and you would use the headers attribute and axis in conjunction with id’s on the elements.

5

–

6

Which is what TH are for… as Stomme Poes suggested.

7

If you want full backgrounds and equal rows then a tables is the best bet unless yu want to resort to a load of tricks.:wink:

8

Well that is actually incorrect because the attribute names should be contained within the headers. Its not tabular, its a list of attributes and their corresponding values. Dividing the data into four columns of attribute and value pairs is presentational, not structural.

Paul, I tested out your example, but its not going to work considering a fluent background color can’t be applied to the entire “row”. I just went ahead with the table. I don’t think its a fight worth fighting. Seems like getting this to work without a table is only going to result in convoluted and complex mark-up and CSS that is going to make the next person looking at my code very angry.