Лучший способ реализовать табуляцию в действительном XHTML?
Для объяснения представьте простой адрес. Написанный абзацем HTML с разрывами строки, он выглядит так:
Street: Example Street 1
City: Vienna
Zip Code: 1010
Country: Austria
В большинстве случаев это нормально, но иногда мне приходится добиваться следующего результата:
Street: Example Street 1
City: Vienna
Zip Code: 1010
Country: Austria
Мои мысли на данный момент:
- Должен быть действительным XHTML и корректно работать или деградировать во всех основных браузерах.
- Использование тегов семантически правильным способом настоятельно рекомендуется.
- Из-за пункта два: я надеюсь, что есть лучшее решение, чем таблицы
- Проблема не ограничивается адресами - пригодится и в другой ситуации
Как добиться этого результата (используя HTML и / или CSS)?
Таблицы - отличный способ представить данные. Проблема в том, что ими злоупотребляют практически для чего угодно, и теперь у них плохая репутация.
Я не отрицаю, что эту проблему можно было бы хорошо решить с помощью таблиц. Однако мне кажется, что таблицы не подходят. Может, я просто педантичен - не знаю;)
Лол, у всех есть свои причуды ;-).
@Christoph Schiessl, разгадка кроется в слове «вкладка». Это сокращение от «tabulated», то есть все, что связано с вкладками, представляет собой табличные данные, и поэтому лучший способ представить их пользователю - это таблица. Все остальное откусывает тебе нос в назло твоему лицу.
На самом деле, у Кристофа есть точка зрения, что несколько адресов будут данными, но один адрес? Я полагаю, это данные, независимо от того, есть ли они сами по себе или в виде коллекции. Если вы действительно хотите, вы можете использовать <pre> и вкладки;)
@ Росс: Это именно моя точка зрения. Я думаю, что в таблицах HTML должны быть представлены только данные, состоящие из нескольких строк (или записей). Я думаю, что таблицы должны использоваться именно так. Остается вопрос: как представить единую «запись» данных в HTML?
@Christoph Ну, я полагаю, для одной строки данных было бы хорошо, если бы был только один результат - например, поиск. Заголовки могут быть хорошей альтернативой, хотя все это в любом случае должно быть заключено в тег address.
Я решил использовать списки определений - на данный момент это, наверное, самое чистое решение. Хорошее объяснение: maxdesign.com.au/presentation/definition
@David - его табуляция данных носит чисто презентационный характер. если бы были разные заголовки, скажем, по одному для каждого клиента, то это была бы таблица. когда вы смотрите на один набор данных, это не таблица. DL - вот ответ.
Ответы 7
Таблицы - это то, что вам нужно.
Я думаю, вы довели концепцию «таблицы - это плохо» до крайности.
- Таблицы, используемые исключительно для разметки (когда другой элемент был бы более семантическим), плохи.
- Таблицы для табличных данных хороши. Они были предназначены для этого!
То, что у вас есть, очень хорошо вписывается в концепцию строк и столбцов с заголовками (<th>) и данными (<td>) - на основе семантики, а не только макета.
Если вы хотите сделать более явным, что это адрес, используйте adr Микроформат или добавьте <caption>.
Неправильные подходы:
<dl>: «1010» не является определением «почтовый индекс». С другой стороны, это имеет немного больше смысла, но связь столь же ясна с<th>→<td>, он не полагается на CSS и будет выглядеть идеально независимо от размера шрифта пользователя. Если вы используете<th>, будет отлично отображаться даже у рыси! Адрес в<dl>без уловки CSS будет выглядеть странно.- Элемент HTML
<address>может не подходить для этого, потому что он предназначен Только для контактной информации автора / сопровождающего страницы. Он также позволяет использовать только встроенный контент, поэтому вы потеряете структуру адреса.
Таблицы плохи, когда вы не используете их для табличной разметки ;-)
@ Крис, я на 100% согласен. Меня сводит с ума тот факт, что в наши дни антитабличная лихорадка настолько плоха, что люди идут на смехотворные меры, чтобы избежать использования таблиц для табличных данных.
Однажды я написал электронную таблицу без таблиц, чтобы ответить на сообщение, в котором утверждалось, что таблицы «никогда» не следует использовать. Больше никогда...
Таблицы могут быть плохими просто потому, что разметка до смешного многословна. Я ненавижу экстремистов «таблицы - плохие», но иногда их можно записать даже для табличных данных, если эти табличные данные можно создать более просто с альтернативной разметкой.
@porneL: добавленная вами ссылка (справа над этим комментарием) поддерживает мнение, что dl - правильный инструмент для этой работы. Просто говорю'. Из TFA: «Списки определений могут использоваться для связывания любых элементов, которые имеют прямую связь друг с другом (наборы имен / значений)»
Я считаю, что здесь списки определений имеют гораздо больше смысла, чем таблицы. Переместите dt влево с определенной шириной и сделайте так, чтобы слева он оставался свободным. Если метка или данные собираются обернуть, вам придется проделать некоторую уловку с очисткой постэлементов, чтобы заставить эту работу работать, но это не похоже на то, что вам это понадобится. (Я думаю, что оно того стоит; плюс, сделайте это один раз, и вам больше никогда не придется это делать).
Вы даже можете использовать :after для автоматического добавления двоеточия, если не возражаете против IE6.
Пока не думал об этом;) Идея очень понравилась!
Я передумал по этому поводу. Первоначально я проголосовал против, поскольку это казалось неправильным использованием dt / dd. Однако, если подумать, данные в вопросе являются классическим случаем данных, которые идеально подходят для модели dt / dd, поэтому теперь за него проголосовали :)
Если вам нравится Кристоф, то отметьте это как «правильный» ответ.
@ Дэвид Арно: Я знаю это. Просто подождем еще немного - может, у кого-то есть еще лучшее решение;) Кроме того: обмен в комментариях довольно интересный ...
Для меня это имеет смысл - оберните его также в адресный блок для дополнительной семантичности =)
Это правильное решение, но я должен согласиться с другими, что это не лучше, чем решение в виде таблиц. Даже UL был бы неправильным. Данные вовсе не список, это просто данные.
Проблема с DL: DT «столбец» не масштабируется автоматически до самого длинного элемента, поэтому вы должны использовать известные имена полей (IE, строки могут разорваться, если пользователи могут добавить поле с длинным именем). С другой стороны, таблица с TH для заголовков и TD для содержимого в порядке, семантически более подходящая и будет автоматически изменяться.
Нет необходимости в таблицах (хотя таблицы были бы действительно неуместными в этой настройке). Я делаю такие вещи все время.
<div class=DetailsRow>
<div class=DetailsLabel>Street</div>
<div class=DetailsContent>123 Main Street</div>
</div>
<div class=DetailsRow>
<div class=DetailsLabel>City</div>
<div class=DetailsContent>Vienna</div>
</div>
...etc
и
div.DetailsRow
{
clear:both;
}
div.DetailsLabel
{
float:left;
width:100px;
color:gray;
}
div.DetailsContent
{
float:left;
width:400px;
}
поэтому вы регулярно пишете кучу кода, чтобы заставить div вести себя как плохая реализация таблиц. Почему? Вы даже используете фиксированную ширину на основе пикселей, поэтому ваше решение дерьмо с точки зрения доступности ...
divs фиксированной ширины! = плохая доступность.
Поскольку div являются элементами уровня блока, я не думаю, что это сильно ухудшает качество.
1. Фиксированная ширина - это не «чушь с точки зрения доступности». Если текст слишком велик для ширины по горизонтали, он переносится. Никто не пострадал.
2. Представленная здесь ситуация не является таблицей. Это тоже не список определений. Поскольку нет HTML-элемента, который бы точно соответствовал ситуации, я думаю, что div не лучше и не хуже альтернатив.
3. Это унижает достоинство. Если CSS отключен, это прекрасно читается.
Я имел в виду, что ваши ярлыки и данные отображаются в отдельных строках и не обязательно связаны между собой. Я думаю, что снижение голосов - это немного жестко.
Не слушайте людей, говорящих, что это табличные данные. Просто потому, что что-то было представлено строками, это не делает его таблицей!
Это отличная ситуация для использования тегов dl, dt и dd. Это немного от того, для чего они изначально предназначены, но все же гораздо более значимо, чем таблица, промежутки или div.
<dl>
<dt>Street</dt>
<dd>Example Street 1</dd>
<dt>City</dt>
<dd>Vienna</dd>
<dt>Zip Code</dt>
<dd>1010</dd>
<dt>Country</dt>
<dd>Austria</dd>
</dl>
И CSS:
dt {
width: 150px;
float: left;
clear: left
}
dd {
float: left;
}
Это довольно простой CSS - он, вероятно, не выдержит многих ситуаций (например, два dd подряд, действительно длинный dt), но это только начало. Посмотрите на свойство inline-block для dt, и, возможно, вместо использования floating вы можете установить left-margin из 150px на dd.
Если вы посмотрите «Почтовый индекс» в словаре, вы не найдете «1010» в качестве определения (если это не двоичный словарь Биг Бендера). У вас есть термин / определение наоборот.
Это нормально, но я просто не согласен с тем, что dl / dt / dd здесь более семантически подходит, чем альтернативы. Это не определения: это пары метка / значение. Поскольку в HTML нет соответствующей сущности, предлагаемые здесь альтернативные подходы (блоки div, таблицы, определения) одинаково хороши.
Проблема с этим подходом в том, что вам нужно определить with для меток. Я бы установил маржу, обеспечивающую минимальное пространство между метками и двумя столбцами текста, но я думаю, что это возможно только с использованием таблиц.
«Он по-прежнему гораздо более значим, чем таблица» - я не согласен, он более значим, чем таблица. Правильно размеченная таблица была бы немного более значимой, чем версия <dl>, если бы у вас были заголовки столбцов. Конечно, список определений тоже хорош.
Как уже упоминалось, здесь можно использовать плавающие элементы.
Это было бы моим решением:
<p class = "details">
<span class = "label">Street:</span>
Some Street or other.
<br />
<span class = "label">City:</span>
A City.
<br />
</p>
С помощью CSS это выглядит так:
p.details {
padding-left: 200px;
}
p.details span.label {
float: left;
clear: left;
width: 200px;
margin-left: -200px;
}
Поскольку основной текст не является плавающим, это позволяет избежать проблем, связанных с длинным текстом, который необходимо переносить; он не позволяет плавающему элементу становиться слишком широким и затем плавать под меткой. Это означает, что нет необходимости в особых случаях, когда этот текст является многострочным, например, если вы хотите иметь многострочный адрес.
Точно так же этот метод также работает, если данные метки должны быть перенесены на несколько строк, поскольку следующая метка очищает предыдущее значение с плавающей запятой.
Наличие разрывов строк означает, что он также хорошо деградирует и выглядит так, как вы ожидаете, когда не используете CSS.
Этот метод очень хорошо работает для компоновки форм, где элементы <label> используются вместо промежутков, а абзацы могут быть выбраны в CSS как любой абзац, являющийся дочерним элементом <form>.
Или вы можете выбросить все здравомыслие (и семантику) и воссоздать таблицы с помощью CSS (проверено в Firefox и Chrome):
<html>
<head>
<title>abusing divs</title>
<style type = "text/css">
div.details {
display: table;
}
div.details > div {
display: table-row;
}
div.details > div > div {
display: table-cell;
padding-left: 0.25em;
padding-right: 0.25em;
}
</style>
</head>
<body>
<div class = "details">
<div>
<div>Street</div>
<div>123 Main Street</div>
</div>
<div>
<div>City</div>
<div>Vienna</div>
</div>
<div>
<div>This is a very very loooong label</div>
<div>...</div>
</div>
</div>
</body>
</html>
Просто шучу.
Я просто не считаю, что таблицы - правильный инструмент для работы. Я не верю, что можно назвать ОДИН адрес табличными данными?