Верстка: Дивы,таблицы, как надо и как не надо

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

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

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

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

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

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

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

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

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

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

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

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

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

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

табличный вариант

<table border="0" cellspacing="0" cellpadding="0">
 <tbody>
   <tr>
     <td colspan="3" height="120">....</td>
   </tr>
   <tr>
<td class="menu" valign="top">...</td>
<td class="content" valign="top">...</td>
<td class="aSide" valign="top">...</td>
</tr>
<tr>
<td colspan="3">...</td>
</tr>
</tbody></table>

вариант для дивов

 <div id="header">...</div>
 <div id="menu">...</div>
 <div id="content">...</div>
 <div id="aSide">...</div>
 <div id="footer">...</div>

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

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

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

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

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

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

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

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

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

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

• MAMA: Средняя страница
  Факты об среднестатистических сайтах.
• MAMA: Основные нахождения
  Интересные находки от МАМА.
• Google Веб статистика
  Анализ веба от гугла с 2005.
• MAMA: Использование таблиц
  Таблицы и как их готовить.
• Почему использовать таблицы для верстки тупо
  Почему использовать таблицы для верстки тупо. Классика жанра.
• CSS верстка vs. Table верстка
  Взгляд со стороны альтернативных браузеров.
• Верстка таблицами: pros и cons
  Прелести и гадости табличной верстки

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

• http://www.artsforeveryone.com/
  745 вложенных таблиц! Оппа, них…!
• http://www.amazon.com/
• http://www.walmart.com/
• http://www.craigslist.org/

Дивы.

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

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

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

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

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

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

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

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

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

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

<div id="container">
   <h1>heading</h1>
    <p>text</p>
</div>

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

<div id="container"></div>
<div id="header"></div>
<div id="text"></div>

Пишите понятней.

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

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

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

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

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

• http://en.wikipedia.org/wiki/Span_and_div
  Про дивы и спаны.
• http://csscreator.com/?q=divitis
  Divitis(переизбыточные дивы): что это и как лечится.
• http://www.alistapart.com/articles/goingtoprint/
  CSS для печати.
• http://www.blind.state.ia.us/ACCESS/how.htm
  Про людей, которые читают с экрана (руками).
• http://www.yourhtmlsource.com/stylesheets/cssspacing.html
  Моель коробки.
• http://dev.opera.com/articles/view/mama-common-attributes/
  MAMA: частые атрибуты.

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

• http://www.spotify.com/en/
• http://photobucket.com/

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

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

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

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

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

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

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

меню

<ul id="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">About</a></li>
</ul>

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

заголовки

<h1>Main heading</h1>
<h2>Normal heading</h2>

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

списки

<ul class="newsList">
     <li>
         <img />
         <h2 />
         <p />
         <a />
     </li>
     <li>
         <img />
         <h2 />
         <p />
         <a />
     </li>
 </ul>

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

контейнеры различной ширины

<body class=»newsShow»>
<div id=»content»></div>
<div id=»aSide»></div>
</body>

/* Containers */
#content { float: left; }
#aSide { float: right; }

/* Page structures */
.newsShow #content { width: 80%; }
.newsShow #aSide { width: 20%; }

.home #content { width: 70%; }
.home #aSide { width: 30%; }

.oneColumn #content { width: 100%; }

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

данные для отправки в списке

<dl>
<dt>Your name is:</dt>
<dd>Susan Hanson</dd>
<dt>Your address is:</dt>
<dd>Street name 1</dd>
<dt>You live in:</dt>
<dd>Oslo</dd>
</dl>

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

простая форма

<form>
<ul>
<li>
<fieldset>
<legend>Person info</legend>
<ul>
<li>
<label for=»name»>Name:</label>
<input type=»text» name=»name» id=»name» />
</li>
<li>
<label for=»age»>Age:</label>
<input type=»text» name=»age» id=»age» />
</li>
…
</ul>
</fieldset>
</li>
<li>
<fieldset>
<legend>Address info</legend>
<ul>
<li>
<label for=»address»>Address:</label>
<input type=»text» name=»address» id=»address» />
</li>
<li>
<label for=»zip»>Zip:</label>
<input type=»text» name=»zip» id=»zip» />
</li>
…
</ul>
</fieldset>
</li>
…
</ul>
</form>

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

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

Почитать:

• http://www.alistapart.com/articles/prettyaccessibleforms
  Статья как кодить формы.
• http://www.w3schools.com/tags/default.asp
  Список тегов с описанием.
• http://www.alistapart.com/articles/returnofthemobilestylesheet
  Возвращение мобильных CSS.
• http://en.wikipedia.org/wiki/Semantic_Web
  Обьяснение семантического веба.
• http://www.peachpit.com/articles/article.aspx?p=369225
  Встроенный дизайн: Значение семантики .

Как перейти с таблиц на дивы

• Попробуйте убирать вложенные таблицы, заменяя подходящими тегами p span ul и т.д. Понемногу убирая таблицы, можно добится сокращения размеров документа.
• Не добавляйте новых таблиц не для табличных данных.
• Разделяйте дизайн и контент. Код для разметки вынесите в css.
• Проверьте, нельзя сделать код более чистым, более семантичным.
• Сделать новый код может выйти дороже по времени и средствам, чем потихоньку его усовершенствовать.
• Не пишите плохой код. Лучше сберегите свое время.

В будущем

Ждут нас две хорошие новости. Это HTML5 и CSS3. Первый будет содержать семантические теги и css-разметку а-ля таблицы, второй помима множества вкусностей типа круглых уголков при помощи CSS, будет фича под названием мультиколонная структура.

HTML5

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

Это добавит несколько возможностей для краулеров:

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

Вместе со структурными элементами, HTML 5 также представит  новые теги. Несколько самых интересных:

• video и audio привнесут новую, семантически обоснованную разметку для контента и позволит видео и аудио потоки направлять напрямую в браузер.
• Формы получат новую и улучшеную семантику для ввода текста и валидации форм.
• Новый тег canvas будет иметь API для двухмерной отрисовки.

HTML 5 будет также содержать много новых APIs, например:

• Немедленный режим отрисовки 2D
• Временное воспроизведение медиа
• Оффлайн хранилище
• Редактирование
• Drag and drop
• Messaging/networking
• Управление кнопкой “Back”
• Обработчик  регистрации MIME и протоколов

Работа над HTML 5 началась в конце  2003 и имеет сроки:

• Первая W3C рабочая примерка в октябре 2007
• Последний созыв в октябре 2009
• Тестовый пакет для распространителей в 2011
• Подготовка релиз-кандидата в 2012
• Первая проба текстового пакета в 2012
• Вторая проба тестового пакета в 2015
• Финальная версия тестового пакета в 2019
• Последний сбор рабочей команды в 2020
• Предложенные рекомендации в 2022

19 лет для разработки это конечно круто, но как и в случае с HTML 4, DOM2 HTML и  XHTML1, три спецификации  HTML 5 предполагается заменить. До 2022 года разрабы не хотят выпускать в пользование, потому что спецификации и требования могут поменятся.

Табличный вывод средствами CSS

Нововведение, позволяет отображать блочные элементы как таблицы про помощи CSS. Аттрибут display как заголовок table, и атрибут display для блочных элементов, которые отображаются как колонки , будут выведены  как table-cell. Табличный вывод на CSS будет более надежным, чем плавающий режим, колонки будут автоматом подгонятся по ширине.

<body>
<ul id=»menu»>
<li><a href=»#»>Home</a></li>
<li><a href=»#»>Products</a></li>
<li><a href=»#»>About</a></li>
</ul>
<div id=»content»>
<p>Fusce quis velit…</p>
</div>
<div id=»aSide»>
<p>Praesent iaculis commodo elit…</p>
</div>
</body>

body { display: table; table-layout: fixed;}
#menu, #content, #aSide { display: table-cell; }
#menu { width: 20%; border: 2px solid red;}
#content { width: 50%; border: 2px solid blue; }
#aSide { width: 29%; border: 2px solid green;}

Разделитель (в примере — body) выставлен отображатся как table, относящиеся колонки выставлены как table-cell. Это также работает для элементов списка.

Мультиколоночный вывод при помощи CSS

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

Мультиколоночный вывод уже поддерживается в Mozilla и в Webkit-based браузерах, элементы  в стилях имеют префиксы -moz- и -webkit-.

Ширина колонок

Число колонок зависит от того, какая ширина выставлена (промежуток между колонками регулирует свойство column-gap) и насколько широк контейнер.

-webkit-column-width: 8em;
-webkit-column-gap: 1em;
-moz-column-width: 8em;
-moz-column-gap: 1em;

Число колонок

Свойство column-count определяет, на сколько колонок будет делиться текст. Ширина зависит от ширины контейнера, размера растояний между колонками и границами колонок.

-webkit-column-count: 2;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
-moz-column-count: 2;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;

На почитать:

• http://www.w3.org/TR/html5/
  W3C Working Draft 10 June 2008.
• http://en.wikipedia.org/wiki/HTML_5
  Об HTML 5.
• http://www.w3.org/TR/html5-diff/
  Разница между HTML 5 и 4.
• http://www.alistapart.com/articles/previewofhtml5
  Обзор HTML 5.
• http://www.alistapart.com/articles/semanticsinhtml5
  Семантика в HTML 5.
• http://www.builderau.com.au/program/html/soa/HTML-5-Editor-Ian-Hickson-discusses-features-pain-points-adoption-rate-and-more/0,339028420,339292515,00.htm
  HTML 5 редактор Ian Hickson обсуждает возможности, острые точки и прочее.
• http://www.sitepoint.com/blogs/2008/02/28/table-based-layout-is-the-next-big-thing/
  Табличный вывод в следующей большой штуке (CSS).
• http://www.css3.info/preview/multi-column-layout/
  W3C предлагает новый вывод текста в колонках, “newspaper-wise,”.

Знание различий между блочными и внутренними элементами

Блочный элемент в HTML это тег (например p, table, h1 или div) после котого идет обрыв. Блочные элементы имеют 5 свойств: height, width, margin, border и padding. Внутренний элемент, например span или anchor, не делает после себя обрыв и не так гибок при использование его как контейнера как блочный элемент. Блочный элемент не допустим внутри внутреннего элемента.

Мой вольный перевод с дополнениями вот это статьи

На закуску.

• Markup validation test passed
• Шпаргалки для разработки
• 10 полезных кроссбраузерных свойств CSS.