Таблица из div блоков

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

Ключевой вопрос

Что же мешает блочной верстке победоносно шагать по планете? Существует множество препятствий. Но, пожалуй, особняком среди них стоит проблема, кое-где сравнимая даже не больше не меньше как с поиском Грааля. Узкое место – создание горизонтальных блоков одинаковой высоты, т.е. реализация той самой что ни на есть табличной сущности, которая порой необходима при верстке сайта, к примеру, в случае классического 3-хколоночного макета:

Хочу предложить, простой, но, в то же время непопулярный подход к решению данной проблемы, а именно строить каркас сайта, отказавшись от табличных тегов, но сохранив табличную модель:

Согласно стандартам CSS, для того чтобы превратить этот набор дивов в таблицу, достаточно указать в классах соответствующие отображения: display:table; , display:table-row; и display:table-cell; .

Но я не случайно назвал такой подход непопулярным. «Табличники» увидят в приеме лишь ненужное «изобретение велосипеда», ярые же поборники nu skool посчитают этот путь идеологически неверным, тем более, что на первый взгляд кажется, что он ведет в тупик, браузеры от Microsoft display:table; не поддерживали, и в ближайшее время поддерживать не планирует, а значит, есть возможность отказаться от табличных шаблонов и этой ситуацией грех не воспользоваться.

Со многими возражениями можно согласиться, но, тем не менее, нельзя не заметить и очевидные плюсы «табличного» подхода, главными среди которых я вижу:

  • разделение содержания от представления;
  • возможность верстать «табличные» макеты любой сложности;
  • простая реализация.
Читайте также:  Как отключить найти айфон через itunes

Решения

Пункт «простая реализация», пожалуй, вызовет наибольшие сомнения, c «правильными браузерами» все понятно, но существует ли действительно простое решение для Internet Explorer? Существует.

К примеру, рассмотрим следующую конструкцию:

Для того чтобы расположить блоки горизонтально, выровняв при этом их высоту, т.е. сымитировать табличное поведение в IE, достаточно определить стилевые классы указать ширину для колонок и… всё. Пример 1 иллюстрирует данную технику (Внимание! Работает только в режиме обратной совместимомости – Quirks Mode) для варианта, когда трем колонкам задана ширина в 200px.

Рассмотрим более «жизненную» задачу: допустим, каркас должен быть растянут по ширине на 100%, ширина первой колонки – 200px, третьей – 30%, вторая же пусть занимает свободное пространство. Решение для IE может выглядеть так (дополним стилевой лист):

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

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

CSS-свойство display: table и другие, делают вывод группы элементов подобно таблице

, но с ограничением – объединения ячеек colspan и rowspan не поддерживаются.

Полный список свойств и тегов, которые они заменяют:

display: table;
display: inline-table;
но с display: inline-block

display: table-caption;
display: table-column-group;
display: table-column;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-cell; или
Читайте также:  Sql удалить повторяющиеся строки

Таблица – сетка

Часто табличная верстка используется в качестве сеточной разметки, хотя это семантически неправильно и возникнут проблемы у мобильной или адаптивной версии. Для сеток специально ввели CSS Gr >display: table .

Рассмотрим пример – сетка 3×2 в три колонки сделанная таблицей:

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

пробовал парсить высоту через jquery, получилось уже ближе к правде jsfiddle.net/mov8aukj

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

может быть, есть какое-то изящное решение без использования js/jquery? или как мне правильно переписать скрипт?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *