Это плохо использовать "display: table"; организовать макет в 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, потому что хочу, чтобы столбцы расширялись и сжимались с доступным пространством.

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

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

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

Ответ 6

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

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

Ответ 7

display: table-cell

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

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

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

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

Лично я бы предпочел таблицу для отображения табличных данных (только для данных), чем структура "div". Моя основная причина заключается в том, что пользователь может легко скопировать данные для распространения листа из своего браузера. Fullfiling my lazyness: " > и уменьшение загрузки страницы (не показывая" скачать как excel, или csv или другое ")... hehehe...: D. О, еще один, в разных браузерах он тоже отображался.

Ответ 8

Вы сказали, используя 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 и боковая панель, ya должен использовать столбец. Используйте -moz- и -webkit- для большей поддержки браузеров.
- justify-content: выравнивание по оси X. Значения: flex-start, flex-end, space-between, space-around, flex-center. Я рекомендую использовать четвертый или пятый.
Ребенок.
- В этом случае я имею в виду с дочерним элементом main (не рекомендуется) или div class="main" и aside или div class="sidebar".
- order: используется для заказа divs, независимо от того, что было помещено первым в коде. Здесь CSS выигрывает от используемого HTML-кода. Значения... номера... используют -moz- n -webkit- plz.
- flex-grow: используется для того, чтобы ребенок был больше, чем остальные, все зависит от его значения и если есть другие дочерние элементы с другими значениями для этого свойства. -webkit- и -moz- r Rcomment ed.

Moar info at: 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. В нем говорится:

таблица, предназначенная для выкладки 2D-данных в табличном формате

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

Ответ 9

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

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

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

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

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

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