Вместо html-таблиц используйте div.. ok, но таблицы просты, поэтому

Ребята Я программист, и когда мне нужно добавить что-то похожее на стол в глаза и использовать html-таблицы, я всегда получаю удовольствие от моих коллег-дизайнеров. Как я могу построить общую структуру div div для div, чтобы я мог просто ее иметь и всегда копировать в html, когда мне нужно что-то, что выглядит как таблица?

Итак, в случае этой таблицы html-структура

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

что такое структура div?

Ответ 1

Вы хотите использовать дисплей table, table-row и table-cell:

CSS

.table
{
   display:table;
}

.table-row
{
   display:table-row;
}

.table-cell
{
   display:table-cell;
}

HTML:

<div class="table">
   <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">2</div>
   </div>
   <div class="table-row">
      <div class="table-cell">3</div>
      <div class="table-cell">4</div>
   </div>
</div>

Демо

Обратите внимание, что отображаемые значения table, table-row и table-cell не поддерживаются в IE7 или ниже, а IE8 нуждается в! DOCTYPE.

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

Ответ 2

Если вы используете элемент HTML table для табличных данных, я рекомендую вам вернуть своих коллег-дизайнеров!

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

http://webdesign.about.com/od/tables/a/aa122605.htm

Ответ 3

Я использую встроенные стили для простоты, но не рекомендую их в реальном проекте:

<div style="overflow: hidden">
    <div style="width: 50%; float: left"></div>
    <div style="width: 50%; float: right"></div>
    <div style="width: 50%; clear: both; float: left"></div>
    <div style="width: 50%; float: right"></div>
</div>

Это одно из многих решений.

Бит overflow: hidden используется для "самоочищения" контейнера div (без него div не будет обертывать его плавающих дочерних элементов). Причина, по которой третий div очищает оба, заключается в том, что он отображает свою собственную строку.

Изменить: поскольку divs имеют ширину 50%, нет необходимости плавать каждый другой div вправо (вы можете плавать их все влево, и он будет выглядеть одинаково), но если вы хотите получить некоторый запас между divs, вы можете просто измените ширину, и каждый другой div по-прежнему будет выровнен по правому краю (что было бы не так, если бы все они были перемещены влево).

Изменить: если вы на самом деле отмечаете табличные данные (как следует из некоторых замечаний), то обязательно используйте элемент таблицы. Что это там для. Вы должны абсолютно не просто переключиться с table, tr и td на div на классы с тем же именем.

Ответ 4

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

.left { float:left; }
.right { float: right }
.onetenth { width: 10%; }
.onetwentieth { width: 5%; }

и т.д.

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

см. https://github.com/stubbornella/oocss/wiki/ (объектно-ориентированный CSS)