Разве плохо использовать «display: table;» организовать макет в 2 столбца?

Question

Я пытаюсь сделать макет из 2 столбцов, по-видимому, проклятие CSS. Я знаю, что вы не должны использовать таблицы для разметки, но я остановился на этом CSS. Обратите внимание на использование дисплея: таблицы и т. Д.

div.container {
  width: 600px; height: 300px; margin: auto;
  display: table; table-layout: fixed;
  }

ul {
  white-space: nowrap; overflow: hidden;
  display: table-cell;
  width: 40%;
  }

div.inner {
  display: table-cell;
  width: auto;
  }

С этим макетом:

<div class="container">

  <ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    </ul>

  <div class="inner">
    <p>Hello world</p>
    </div>

  </div>

Кажется, это работает превосходно. Однако я не могу не задаться вопросом - подчиняюсь ли я букве правила «не использовать таблицы», но не духу? Я думаю, что все в порядке, поскольку в HTML-коде нет разметки позиционирования, но я просто не уверен в «правильном» способе сделать это.

Я не могу использовать css float, потому что я хочу, чтобы столбцы расширялись и сжимались с доступным пространством.

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

Answer 1

Есть два существенных аргумента для отказа от использования таблиц:

1. Семантическая разметка.
2. Избегайте тегов супа. (слишком много тегов)

Итак, ваш метод на самом деле не нарушает ни одну из этих целей. Однако вы должны проверить этот код в IE7 и IE6 - вы, вероятно, увидите там некоторые несоответствия.

Как уже упоминалось, не беспокойтесь о слишком строгом соблюдении этих правил. Это руководящие принципы, и вы должны использовать правильный инструмент для работы, которую вы делаете. Здесь важно знать, какие методы лучше всего подходят и когда их использовать. Иногда использование таблицы - лучший инструмент для того, что вы пытаетесь сделать, иногда это не так.

Answer 2

Это тип примера, для которого был разработан display: table-cell;. В конце концов, вы помещаете форматирование в таблицу стилей, а не в разметку. Так что расслабься! Это нормально.

Answer 3

Проблема с использованием табличных тегов для не табличных данных в HTML заключается в том, что они накладывают форматирование в том, что должно быть просто данными.

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

На заметкуЯ уверен, что IE 6 не поддерживает display: table-cell, поэтому, в зависимости от вашей цели, вам может потребоваться альтернативное расположение.

Answer 4

Было бы здорово, если бы каждая возможная раскладка могла быть сделана с помощью css, без видимых таблиц или псевдостолов.Но есть исключения, и пока html и css (и поддержка браузера) не позволят нам сделать это, будьте довольны вашими таблицами.В конце концов, главное - удовлетворить своих пользователей, а не придерживаться чужой философии.

Answer 5

Использование дисплея: таблица в порядке, когда вы говорите о семантике. Во-первых, причина «плохие таблицы» в том, что разметка (HTML) должна описывать содержимое внутри нее. Так что, если это не данные, они не принадлежат таблице.

Поскольку вы просто устанавливаете способ отображения разметки (в структуре таблицы), это прекрасно.

Однако это не будет работать для всех браузеров. В частности, IE6 и IE7 (и IE8 в «режиме совместимости») не будут отображать это правильно.

Для получения дополнительной информации о типах отображения и поддержке браузера, вы можете обратиться к этому: http://www.quirksmode.org/css/display.html

Answer 6

Вы сказали, что используете display:table для такой большой ширины, как столбцы?

Я не могу использовать css float, потому что я хочу, чтобы столбцы расширялись и договор с доступным пространством.

Тогда вы также можете использовать свойства flex! Давайте разберемся с этим:

В CSS3 было добавлено много свойств, есть одна группа с именем flex , которая используется для создания гибких элементов div без использования таблиц или display: table; также используется, когда пользователь использует маленький экран (может быть, мини-ноутбук, планшет, большой смартфон типа Galaxy или маленький ...?). Это свойства:

• Родитель .
  • Это основной контейнер. Например, допустим, у вас есть сеть с очень простой HTML-структурой и тремя div-ами (один с основной информацией, другой используется в качестве боковой панели и, наконец, один для переноса первых двух упомянутых).
  • display: flex : используется, чтобы сообщить браузеру, что мы говорим о гибких элементах. Используйте -webkit- перед значением (inline-flex также применимо) для поддержки Google и Safari. Вам не нужно использовать -moz- или -o-, а также -ms-.
  • flex-direction : это ориентация потомков внутри этого родителя. Для этого доступны четыре значения: row, column, row-reverse или column-reverse. Поскольку вам нужен основной div и боковая панель, вы должны использовать столбец. Используйте -moz- и -webkit- для большей поддержки браузера.
  • justify-content : выравнивание по оси X. Значения: flex-start, flex-end, пространство между, пространство вокруг, flex-center. Я рекомендую использовать четвертый или пятый.
• Дети .
  • В этом случае я буду обозначать с ребенком как main ( не рекомендуется ) или div class="main" и aside или div class="sidebar".
  • order : используется для упорядочивания div, независимо от того, что было помещено первым в коде. Здесь CSS выигрывает у используемого HTML-кода. Значения ... цифры ... используйте -moz- n -webkit- плз.
  • flex-grow : используется для того, чтобы дочерний элемент был больше остальных, все зависит от его значения и наличия других дочерних элементов с другими значениями для этого свойства. -webkit- & -moz- r Rcomment ed.

Информация о Моаре: http://css -tricks.com / snippets / css / a-guide-to-flexbox / и http://www.w3schools.com/cssref/default.asp#flexible.

О, и вот ответ: да, вы можете использовать его. Читайте по адресу: http: /www.w3.org/TR/css3-flexbox/#intro. Это говорит

макет таблицы, предназначенный для размещения двумерных данных в табличном формате

Они не говорят о плохой идее, они просто устанавливают свой формат в ACT (и, может быть, не похож) как таблица.

Answer 7

Как ни странно, использование display: table, вероятно, станет распространенным приемлемым решением в будущем.

См .: http://net.tutsplus.com/tutorials/html-css-techniques/html-5-and-css-3-the-techniques-youll-soon-be-using/

Answer 8

Позвольте мне рассказать вам об этом. У элемента были свои прелести, и это было причиной того, что каждый использовал его. Но потом семантика стала развиваться. Мы были намного выше с синтаксисом. Были приняты решения, от имени которых был отклонен XHTML 2.0 и принят HTML5. Прочитайте историю WHATWG (Рабочая группа по технологиям веб-гипертекста), чтобы получить представление об этом.

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

HTML предназначен для структурирования веб-страницы. CSS предназначен для стилизации этой структуры.

Итак, элемент HTML и многие другие были удалены из спецификаций. Они были специально использованы для стиля вместо структурирования.

Чтобы решить судьбу элемента, было решено сохранить его в спецификациях, так как в реальных таблицах предполагается его структурировать, но для смещения фокуса обычного веб-дизайнера аналогичные способности / спецификации должны быть добавлены в CSS ,

Теперь элемент HTML предназначен для структуры таблицы и ничего более. Если вы хотите использовать таблицу для стилизации, воспользуйтесь display: table; который является свойством CSS, а CSS предназначен для стилизации элементов структуры в HTML. Выше это может быть изменено и контролировать, например, в RWD вы можете указать любой элемент, чтобы изменить его отображение с таблицы на блок или что-то еще

Answer 9

display: table-cell

- это стиль, а не структура таблицы, подобная этой:

<table>
   <tbody>
       <tr>
          <td>
          </td>
       </tr>
   </tbody>
</table>

Так что я думаю, что это нормально, использовать его.

Кстати, я не думаю, что стол действительно злой, в конце концов.

Лично я бы предпочел таблицу для отображения табличных данных (только для данных), чем структуру "div". Моя главная причина заключается в том, что пользователь может легко скопировать и вставить данные в электронную таблицу из своего браузера. Полное заполнение моей ленивости: "> и уменьшение загрузки страницы (не показывая" скачать как Excel, или CSV или другие ") ... хе-хе ... ... О, еще один, в разных браузерах он отображается одинаково.