Как сделать таблицу через 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 tables

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

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

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

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

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

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

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

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

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

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

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

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

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

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

и

.

Фиксировать высоту с помощью свойства height не рекомендуется.

3. Как задать фон таблицы

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

4. Столбцы таблицы

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью элемента

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

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

Подробнее про CSS-селекторы вы сможете прочитать здесь.

5. Как добавить таблице заголовок

caption-side
Значения:
top Заголовок таблицы располагается над таблицей. Значение по умолчанию.
bottom Располагает заголовок под таблицей.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

caption sideРис. 1. Пример отображения заголовка под таблицей

6. Как убрать промежуток между рамками ячеек

border-collapse
Значения:
separate Рамки ячеек располагаются раздельно.
collapse Рамки ячеек сливаются в одну, а промежутки между рамками убираются.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

table border collapse1Рис. 2. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом.

border-spacing
Значения:
Добавляет промежутки между рамками как по вертикали, так и по горизонтали. Если заданы две длины, то первая всегда определяет горизонтальный промежуток, а вторая — вертикальный.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

table border spacingРис. 3. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table , то ячейка не будет скрыта.

9. Компоновка макета таблицы с помощью свойства table-layout

Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек.

Свойство не наследуется.

10. Лучшие макеты таблиц

По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine

top table

1. Горизонтальный минимализм

top table1

top table2

Добавление эффекта :hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.

top table3

2. Вертикальный минимализм

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

top table4

3. «Коробочный» стиль

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

top table5

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

top table6

4. Горизонтальная зебра

Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.

top table7

5. Газетный стиль

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

top table8

top table9

top table10

6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

Источник

Таблицы CSS лучше таблиц HTML?

Как создать таблицу CSS

Модель CSS таблиц основана на модели таблиц HTML4 и хорошо поддерживается браузерами. В обеих моделях структура таблицы существует параллельно визуальному представлению.

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

Наверняка вы работали с таблицами HTML раньше. Если да, то у вас не будет проблем с созданием таблиц CSS.

Каждый элемент таблицы HTML имеет эквивалент в CSS. Единственное отличие заключается в отсутствии отличий между td и th в варианте CSS.

Ниже приводится список элементов таблиц HTML и соответствующие им значения CSS.

Подписи могут быть размещены сверху или снизу таблицы с помощью свойства caption-side :

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

Совсем небольшой код CSS представляет элементы div и span в виде таблицы.

Столбцы и их группировка

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

Стек таблицы CSS

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

Данные слои можно посмотреть на представленном рисунке.

Фон слоя будет виден только если выше лежащий слой имеет прозрачный фон.

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

img 1

Алгоритм шаблона таблицы

Фиксированная модель шаблона вычисляется один раз и очень быстрая. А автоматический режим (используется по умолчанию) требует нескольких проходов по таблице HTML.

Если вы явно определяете ширину таблицы, то следует использовать фиксированную модель расчета ширины.

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

Свойство vertical-align определяет выравнивание содержания в строке

Рамки таблицы CSS

Есть три интересных свойства для рамок таблиц:

img 2

Нужно ли использовать таблицы CSS?

Лучше ли таблицы CSS чем таблицы HTML? Если да, то в чем их преимущества? Если нет, то почему их не надо использовать? Хорошие вопросы, на которые нет однозначного ответа.

Если рассмотреть использование таблиц HTML в сравнении с комбинацией элементов div и кода CSS, то выявляются следующие недостатки таблиц:

В соответствии с выше сказанным у таблиц CSS нет существенных преимуществ перед таблицами HTML при использовании их в шаблонах.

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

Заключение

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

Может быть практика использования покажет преимущества или недостатки таблиц CSS. Есть ли у вас опыт использования таблиц CSS в реальных проектах?

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.vanseodesign.com/css/tables/
Перевел: Сергей Фастунов
Урок создан: 5 Ноября 2011
Просмотров: 93508
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

thumbnail

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

thumbnail

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

thumbnail

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

thumbnail

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Источник