However, it was made to organize
forms, and using it for general design
is no better than using tables for
general design
This is mistaken. The main problem with using tables for layout is that almost no layouts map to tabular data. The second problem is that none of those that don't map to tabular data are tabular data, and some of those that do aren't. That is, the semantics of the markup wouldn't match those of the page. In addition, pragmatically, tables' layout mechanism usually makes custom styling and text-only browsing painful or impossible.
Now, fieldset clearly has the intent of grouping form fields. And choosing an element for its appearance is almost always a sign it's a bad choice. However, for this specific example I would argue that a fieldset+legend containing a list has almost no disadvantages (in fact, the only one I can think of is a scaper which naively interprets fieldset as signalling a form and then wasting the user's time enumerating its contents differently; but I know of nothing which actually does this). The main reason for this is that the form element serves the functional and semantic purpose of containing inputs, while fieldset has possessed since the early days had special, non-reproducable visual effects. In addition, if the visual elements in the fieldset are in any way functional, semantically the fieldset does again contain a set of interactive widgets, which was the original point.
My advice is to use it if you want to. I wouldn't, but not because of semantic considerations: I prefer not to rely on special effects, and eschew form over function in general.
Anyway, here's something to chew on:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test</title><style type="text/css">
.fake_fieldset {
border: 2px groove ButtonFace;
border-top-width: 0;
margin-left: 2px;
margin-right: 2px;
padding: .35em .625em .75em;
margin-top: 1em;
position: relative;
}
.fake_legend {
margin-top: -1em;
}
.fake_legend.test1::before {
position: absolute;
top: 0;
left: -1px;
border-top: 2px groove ButtonFace;
content: " ";
width: 0.5em;
}
.fake_legend.test1::after {
position: absolute;
top: 0;
right: -1px;
border-top: 2px groove ButtonFace;
content: " ";
width: 80%;
}
.fake_fieldset.test2 {
padding: 0;
padding-top: 1px; /* no collapsed margin */
}
.fake_fieldset.test2 .fake_fieldset.container {
margin: 0;
border: 0;
}
.fake_legend.test2 {
display: table;
width: 100%;
}
.fake_legend.test2 span {
display: table-cell;
}
.fake_legend.test2 span:first-child {
width: 0.5em;
}
.fake_legend.test2 span:first-child + span {
width: 0; /* cells stretch */
}
.fake_legend.test2 span:first-child,
.fake_legend.test2 span:last-child {
/* the rest of this code is left as an exercise for the reader */
}
</style></head><body>
<fieldset><legend>foo</legend>bar</fieldset>
<div class="fake_fieldset test1"><div class="fake_legend test1">foo</div>bar</div>
<div class="fake_fieldset test2"><div class="fake_legend test2"><span></span><span>foo</span><span></span></div><div class="fake_fieldset container">bar</div></div>
</body></html>
