Лучший способ реализовать табуляцию в действительном XHTML? - PullRequest
Новая
       19

Лучший способ реализовать табуляцию в действительном XHTML?

9 голосов
/ 13 октября 2008

Для объяснения представьте простой адрес. Написанный в абзаце HTML с разрывами строк, он будет выглядеть так: 

Street: Example Street 1
City: Vienna
Zip Code: 1010
Country: Austria

В большинстве случаев это вполне нормально, но иногда мне приходится добиваться следующего результата: 

Street:   Example Street 1
City:     Vienna
Zip Code: 1010
Country:  Austria

Пока мои мысли:

  1. Должен быть допустимым XHTML и работать или корректно работать во всех основных браузерах
  2. Настоятельно рекомендуется использовать теги семантически правильным образом
  3. Из-за пункта два: я надеюсь, что есть лучшее решение, чем таблицы
  4. Проблема не ограничивается адресами - будет полезна и в других ситуациях

Как добиться этого результата (используя HTML и / или CSS)?

Ответы [ 7 ]

17 голосов
/ 13 октября 2008

Я думаю, что вы взяли концепцию "таблицы плохие" до крайности.

  • Таблицы, используемые исключительно для разметки (когда другой элемент был бы более семантическим), плохие.
  • Таблицы для табличных данных хороши. Они были предназначены для этой цели!

То, что у вас есть, прекрасно вписывается в концепцию строк и столбцов с заголовками (<th>) и данными (<td>) - на основе семантики, а не только макета.

Если вы хотите уточнить, что это адрес, используйте adr Микроформат или добавьте <caption>.

Неправильные подходы:

  • <dl>: «1010» не является определением «почтового индекса». С другой стороны, это имеет немного больше смысла, но отношения с <th> → <td> столь же ясны, они не зависят от CSS и будут выглядеть совершенно независимо от размера шрифта пользователя.
    Если вы используете <th>, то будет отлично отображаться даже в рыси ! Адрес в <dl> без CSS трюка будет выглядеть странно.
  • HTML-элемент <address> может не подходить для этого, поскольку он предназначен только для контактной информации автора / сопровождающего страницы. Он также допускает только встроенный контент, поэтому вы потеряете структуру адреса.
9 голосов
/ 13 октября 2008

Я считаю, что списки определений имеют гораздо больше смысла, чем таблицы здесь. Переместите dt влево с определенной шириной и оставьте его свободным слева. Если или метка, или данные собираются обернуть, вам придется сделать некоторую хитрость после очистки элемента-поплавка, чтобы это сработало, но не похоже, что вам это нужно. (Во всяком случае, я думаю, что это того стоит; плюс, сделайте это один раз, и вам никогда не придется делать это снова.)

Вы даже можете использовать :after для автоматического добавления двоеточий, если не возражаете отмахнуться от IE6.

4 голосов
/ 13 октября 2008

Не слушайте людей, которые говорят, что это табличные данные. То, что что-то представлено в строках, не делает его таблицей!

Это отличная ситуация для использования тегов dl, dt и dd. Это бит от того, для чего они изначально предназначались, но все же гораздо более значимо, чем таблица, интервалы или деления. 

<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, и, возможно, вместо использования float ing, вы можете установить left-margin из 150px для dd.

2 голосов
/ 13 октября 2008

Таблицы - это путь.

0 голосов
/ 26 июля 2010

Или вы можете отбросить все здравомыслие (и семантику) и воссоздать таблицы, используя 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>

Шучу.

0 голосов
/ 13 октября 2008

Как уже упоминали другие, плавучие элементы - путь сюда.

Это было бы моим решением: 

<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>.

0 голосов
/ 13 октября 2008

Нет необходимости в таблицах (не то, чтобы таблицы были действительно неподходящими в этой настройке). Я делаю такие вещи все время. 

<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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...