Однако это было сделано для организации
формы, и использовать его для общего дизайна
не лучше, чем использовать таблицы для
общий дизайн
Это ошибка. Основная проблема с использованием таблиц для макета состоит в том, что макеты почти не отображаются в табличных данных. Вторая проблема заключается в том, что ни один из тех, которые не отображаются в табличные данные, является табличными данными, а некоторые из них не являются. То есть семантика разметки не совпадает с семантикой страницы. Кроме того, прагматично, механизм компоновки таблиц обычно делает пользовательские стили и просмотр текста только болезненными или невозможными.
Теперь fieldset явно имеет намерение группировать поля формы. И выбор элемента для его внешнего вида почти всегда является признаком плохого выбора. Тем не менее, для этого конкретного примера я бы сказал, что легенда fieldset +, содержащая список, практически не имеет недостатков (на самом деле, единственное, о чем я могу подумать, это scaper, который наивно интерпретирует fieldset как сигнал формы, а затем тратит время, перечисляя пользователя его содержание по-другому, но я ничего не знаю, что на самом деле делает это). Основная причина этого заключается в том, что элемент формы выполняет функциональную и семантическую цель, заключающуюся в том, что он содержит входные данные, в то время как fieldset обладал специальными, невоспроизводимыми визуальными эффектами. Кроме того, если визуальные элементы в наборе полей каким-либо образом функционируют, семантически набор полей снова содержит набор интерактивных виджетов, который был исходной точкой.
Мой совет - используйте его, если хотите. Я бы не стал, но не из-за семантических соображений: я предпочитаю не полагаться на спецэффекты и избегать форм в целом.
Во всяком случае, вот что жевать:
<!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>