Как сделать таблицу через div

Linux, кодинг, митолл и прочая хрень 🙂

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

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

С дивами вроде проще — можно и стиль прописать без излишнего кода и понятно будет для чего этот див. Но иногда их очень трудно отпозиционировать относительно друг друга. Сейчас уже мне в дивах намного проще сверстать.

Итак, таблицы.

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

MAMA (Metadata Analysis and Mining Application, приложение для анализа и разработки метаданных) это структурированный вебпоисковик от Opera Software, занимается парсингом страниц и возвращает их детализированую структуры.

По данным МАМЫ, большинство сайтов юзает таблицы, да еще и таблицы по три уровня вложенности. Среди самых популярных тегов: table, td и tr присутствуют само собой. 80% сайтов, которые знает МАМА, состоят из таблиц. Такая вот статистика.

С точки зрения семантики — таблица — это элемент для представления табличных данных, он не оптимизирован для построения структуры.

Простота использования.

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

Обслуживаемость.

Таблица состоит из тучи тегов: table открывает таблицу, tr открывает ряды, td открывает ячейки. Есть еще thead и tbody, они добавляют свои строки в заголовок и в тело таблицы, их можно не использовать.

Для читабельности, каждому тегу отдают свою строку. Rowspan и colspan вытягивают одну ячейку по колонке/столбцу, добавляя еще болей непонятности в код.

Вот такая вот конструкция + дополнительные теги (img и тп) + сам контент добавляется в тело документа. Разобратся в структуре бывает весьма непросто.

Как видно, в таблице кода будет побольше. Нетрудно представить, как может разростись код при увеличении страницы.

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

Все это слегка намекает, что code smell(код попахивает, домен кстати двухзнак в ком!).

Еще в таблицах тяжелее отпозиционировать контент. МАМА сообщает, что среди сайтов юзающих таблицы, 90% используют border, width, cellpadding и cellspacing. Все это дело обычно не выносят в цсс, что добавляет еще кода.

А как известно, цсс то кешируется в браузере, а вот хтмл документ нет.

Для особо кропотливых — программер пишет строк кода больше, но кпд этого кода ниже, следовательно он тратит рабочее время на пустоту.

Есть еще другая статистика — это отношение ошибок на строку кода. Чем больше строк кода, тем больше ошибок. Вот так.

Гибкость при использовании.

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

Доки по теме таблиц

Сайтеги на таблицах

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

Простота использования

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

Див выглядит иначе таблицы. Все представляют, как выглядит таблица, а вот с дивом напряг. Див это одиночный блок, он не ограничивается каким-то родительским элементом, как td например.

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

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

Обслуживаемость

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

Вкладывавание дивов друг в друга — это путь к большому гемору. Тронув такой код, можно всю верстку порушить.
Идеал — группировать одним дивом элементы, описывая их свойсвта в родительском класса.

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

воспринимается проще чем

Еще парочка причина, зачем делать семантическую верстку:

Гибкость при использовании

Даже при переусердствовании дивами сайт может быть легко отображен где угодно, если дизайн отделен от контента и вынесен в стили. Есть полезная статья “Going to Print” в которой расказывается как сделать сайт максимально полезным для принтера.
Чрезмерная структура также мешает некоторым браузерам от Мозиллы корректно печатать документы.

Почитать по теме:

Сайты с переизбытком дивов:

Так как же надо?

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

Используем дивы правильно

Перед созданием нового дива, нужно прикинуть, а нужен ли он тут или нет. H1-5 вполне могут заменить заголовки, а списками можно сделать и меню и сами списки и вертикальные блоки до кучи. Еще есть параграф p.
Для гибкости вывода форм, можно заключать их в fieldset, а его уже в список.

Не забывайте, что чем меньше дивов, тем меньше кода, тем он проще, тем меньше в нем ошибок.Когда контент разверстан, переходим к картинкам. Для начала их пробуют вставить в документ при помощи background-image и других средств CSS. Если этого никак не сделать, то можно создать новый див.

Всякие штучки

Несколько базовых приемов. Приводятся с целью обращения верстальщиков в идеи чучхе в правильную верстку. Обратите внимание на читабельность кода.

Меню как список очень просто в использовании. Тег li блочный, может иметь бекграунд. Такие меню занимают мало места, в них просто встроить подменю.

заголовки

Используйте заголовки где можно. Они дают некоторый вес в ПС + облегчают восприятие документа.

списки

Группируйте схожие куски кода и добавляйте их в код. Списки хорошие контейнеры. В списках не нарушается чередование элементов. Т.е. дивы могут разьехатся и последний может стать первым, списки даже если и поползут, очередность элементов останется.

Источник

2.8. CSS-таблицы

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

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

Форматирование таблиц

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border :

Границы ячеек заголовка каждого столбца задаются для элемента th :

Границы ячеек тела таблицы задаются для элемента td :

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

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

Границы можно задавать частично:

Подробнее о свойстве border вы можете прочитать здесь.

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

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