Как это сделать с помощью CSS

Question

В настоящее время я работаю над веб-приложением, и мне нужно отобразить некоторые поля в табличной форме. Например:

------------------------------------------------------
First Name: John   Last Name: Smith   Age: 26
------------------------------------------------------
Town: Madrid       Country: Canada   Colour: Blue 
------------------------------------------------- 
etc  
-------------------------------------------------

Поля должны быть выровнены (в приведенном выше примере «Город» должен быть точно ниже «Имя», «Страна» должен быть ниже «Фамилия» и т. Д.). Я думал об использовании html-таблицы (и помещая имя поля / значение в каждую ячейку), но после всего, что я прочитал на этом сайте, похоже, что я должен использовать css, так как данные, которые я хочу отобразить, не являются действительно табличными. Я просто хочу, чтобы это выглядело в виде таблицы. Я не могу найти простой способ сделать это с помощью CSS, хотя. Есть идеи?

Answer 1

В этих случаях возиться с CSS - это PITA, и я почти всегда предлагал бы таблицу. Как уже сказал Скотт, семантически список определений будет хорошим выбором:

<dl>
  <dt>First Name</dt><dd>John</dd>
  <dt>Last Name</dt> <dd>Smith</dd>
  <dt>Age</dt>       <dd>26</dd>
  <dt>Town</dt>      <dd>Madrid</dd>
  <dt>Country</dt>   <dd>Canada</dd>
  <dt>Colour</dt>    <dd>Blue</dd>
</dl>

Вы можете оформить это так:

dl {
    margin: 0;
}
dt {
    float: left;
    background: #eee;
    width: 10%;
    margin: 0;
    white-space: nowrap;
    padding: 0.25em;
}
dt:after {
    content: ':';
}
dd {
    float: left;
    width: 20%;
    margin: 0;
    padding: 0.25em;
}

Чтобы выровнять значения X для каждой строки, вы должны явно указать ширину для каждого элемента, что не всегда может быть настолько практичным. Однако, чтобы получить новую строку, вы можете поработать с селектором: nth-child (или использовать атрибут для старых браузеров) и указать в его определении clear: left;.

Answer 2

Я думаю, вы немного сбиты с толку относительно того, когда использовать CSS и когда использовать таблицы. Когда у вас есть столько данных, вы, вероятно, должны использовать таблицы. Хорошо позиционировать фактическую BOX, в которой он используется CSS, но из того, что я вижу, данные внутри поля должны быть внутри таблицы.

Answer 3

Это действительно прекрасная возможность использовать таблицу HTML. Это именно то, для чего существуют HTML-таблицы. Для меня данные выглядят довольно таблично.

Answer 4

Семантически, вы можете использовать список определений. Вы можете указать ширину элементов dt и dd, чтобы выровнять их, а затем сместить их влево.

Answer 5

Я могу быть убит настольными танцорами за этот ответ, но скупость бесполезна, когда дело доходит до развития . Использовать тег <b> для жирного шрифта проще, чем <strong>. Для курсива проще использовать <i>, чем для <em>.

При создании макетов проще использовать архаичные методы, такие как макеты таблиц, чем делать все правильно и использовать семантически правильную разметку.

Правильный путь не всегда самый простой.

Как говорится, выбрал подходящую базу для начала. Некоторые здесь предлагают списки определений, с которыми я не обязательно не согласен. На самом деле вы можете использовать практически любой список.

Затем создайте стиль ваших предметов по своему вкусу, используя float и inline-display для блочных элементов.

<ul>
  <li class="fname">
    <label>First Name</label> <input type="text" name="fname" />
  </li>
  <li class="lname">
    <label>Last Name</label> <input type="text" name="lname" />
  </li>
</ul>

Затем вы можете установить, а затем выпустить эти два li:

ul.userData {margin:0;padding:0;}
ul.userData li {float:left}

И даже установить определенную ширину для каждого li, так как у них есть свои собственные классы:

li.fname {width:100px;}
li.fname label {width:50px;margin-right:10px;}
li.fname input {width:40px;}

Answer 6

------------------------------------------------------
First Name: John   Last Name: Smith   Age: 26
------------------------------------------------------
Town: Madrid       Country: Canada   Colour: Blue 
------------------------------------------------------

только один человек отображается таким образом? Если так, то нет, семантически это не таблица, это список.

Вот мое правило: табличные данные - это данные, значение которых вы можете узнать только по их координатам .

First name             Last Name                   Age
------------------------------------------------------
John                   Smith                        26
------------------------------------------------------
Jane                   Jones                        23
------------------------------------------------------

Что означает "23" в в приведенной выше таблице? Это означает «Эпоха Джейн Джонс», но вы можете сказать, что только если знаете, что она находится в строке «Джейн Джонс» под столбцом «Возраст», и знаете, что это не номер ее дома или количество лет, в которых она здесь работала. Или, конечно, возраст Джона Смита.

Age: 26

является парой ключ-значение.

Answer 7

Использование таблицы для достижения этого макета было бы невозможностью отделить обозначение от содержимого. Ваш контент здесь представляет собой список пар ключ / значение; тот факт, что вы хотите отобразить его в виде сетки 3 на X, не делает его табличным.

Рассмотрим пользователя программы чтения с экрана, пытающегося перемещаться по такой таблице; чтобы добраться до следующей пары ключ / значение, он должен решить, идти ли ему вправо или вниз. Поскольку нет никакой разницы между горизонтальными и вертикальными отношениями между элементами, он не может принять решение и станет дезориентированным и должен будет угадать.

Существуют варианты относительно того, как пометить это семантически правильным образом, но я бы предпочел использовать неупорядоченный список:

<ul class="details">
    <li>First name: John</li>
    <li>Last Name: Smith</li>
    <li>Age: 26</li>
    <li>Town: Madrid</li>
    <li>Country: Canada</li>
    <li>Colour: Blue</li>
</ul>

CSS:

.details
{
    width:600px;
    margin:0;
    padding:0;
}
.details li
{
    float:left;
    width:200px;
    border-bottom:1px solid #333;
    list-style-type:none;
}

Если есть вероятность, что значения могут быть перенесены, вам нужно будет либо зафиксировать высоту элементов списка, либо очистить левый плавающий знак для каждого третьего элемента.

Answer 8

Используйте таблицы. Таблицы для табличных данных.

Answer 9

Я бы пошел за столами. Используйте <th> для своих заголовков и <td> для своих данных:

<table>
    <tr>
        <th>First Name:</th>
        <td>John</td>
        <th>Last Name:</th>
        <td>Smith</td>
        <th>Age:</th>
        <td>26</td>
    </tr>
    <tr>
        etc.

Answer 10

Хотя использование вложенных таблиц для всего является демонстративно плохой идеей, не бойтесь использовать их, когда вы хотите показать таблицу. Каждый тег разметки был создан по определенной причине, и для этой цели был создан тег таблицы.

Если вы хотите получить лучшее представление о лучших методах разметки и о том, как использовать CSS, я не могу рекомендовать эту книгу достаточно:

http://www.amazon.co.uk/Bulletproof-Web-Design-Flexibility-Protecting/dp/0321509021/ref=sr_1_1?ie=UTF8&s=books&qid=1234824362&sr=8-1

Это была книга, которая сделала CSS действительно привлекательной для меня и улучшила стандарт сайтов, которые я создавал без конца.

Помните, когда вы сомневаетесь в том, какой HTML-тег использовать, подумайте о его названии и к чему это может относиться.