Большие таблицы на слоях (div-таблицы)

04.04.2015

Большие таблицы на слоях (div-таблицы). При разработке интернет-магазинов нередко возникает задача отображения на странице большого количества записей с информацией о товаре. Кто-то для этого делает постраничный вывод информации, кто-то пытается грузить всё в одной большой таблице. HTML-таблицы относительно просты в настройке, но, как хорошо известно, выводятся крайне медленно. Например, при выводе HTML-таблицы с 800 записями и минифотографиями, общим весом порядка 1 Мб, я обратил внимание на то, что отображаются на странице не все фотографии при локальной загрузке на мощном компьютере. Такое положение дел никак не могло устроить, и было решено сверстать эту таблицу слоями.

Вопрос, а для чего выводить на одной странице столько записей? Для того, чтобы можно было заказывать широкий ассортимент известного заказчику товар в интернет-магазине без постоянного листания страниц и использования удобного поиска информации на странице без листания страниц и перезагрузок информации и пользоваться встроенным в браузер поиском, что достаточно удобно. Получается весьма неплохая альтернатива заказу товаров в прайс-листе Excel.
Можно использовать отображение данных в формате:

Таблицы без фотографий
Таблицы или списка с минифотографиями
Витрины с фотографиями среднего размера

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

Табличное представление без фотографий. Наименьший из всех вес и наибольшая из всех представлений плотность записей. Данное представление аналогично прайс-листу в Excel. Недостаток - худшая из всех представлений наглядность.
Таблица или список с минифотографиями. Неплохая наглядность при среднем весе. Благодаря увеличенной высоте строк в таблице можно в ней выводить не только название товара, но и кроткую аннотацию или важные параметры, чтобы можно было сразу сравнивать товары без перехода в их описания
Витрина с фотографиями среднего размера. Лучшая наглядность из всех, но самый большой вес

Различные способы представления можно посмотреть на сайте kronauto.ru

Из всех этих способов представлений информации о товаре выигрышным является представление информации в виде таблицы с минифотографиями.

Если вы ещё не имели дело с версткой таблиц слоями div, то поначалу это занятие покажется крайне сложным и непрактичным. Резиновые ячейки, вертикальное выравнивание, отображение информации при изменении размеров ячеек при использовании HTML-таблиц делается элементарно, а со слоями придётся посидеть и для начала посмотреть какие-нибудь рабочие примеры, потому что браузеры и CSS-стили вынесут мозг, пока получится реализовать базовую функциональность. Но в результате даже при использовании высокоскоростного Интернет-соединения вы увидите разницу между скоростью загрузки и отображения HTML- и DIV-таблиц (хотя и им не под силу соперничать со скоростью SELECT-таблиц). На практике это может выражаться так, при прочих равных условиях DIV-таблица с 800 записями может грузиться и отображаться как легкая HTML-таблица со 100-200 записями. По сравнению же с тяжелыми HTML-таблицами (в которых тегов больше, чем самих данных, что нередко можно встретить на страницах, сгенерированных программами управления сайтами) DIV-таблицы будут просто летать!

Не следует путать DIV-таблицы и CSS-таблицы, как я их называю - это не слои со специальными табличными селекторами. Разницу между ними можно посмотреть здесь. Обзор не претендует на полноту, но как небольшое введение в тему может показаться интересным.

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

Оглавление ←→