Виды вёрстки

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

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

Вёрстка – процесс формирования страниц (макета) путём компоновки текстовых, графических и прочих элементов.

В сети можно встретить несколько прилагательных, употребляющихся со словом верстка:

1. Дивная.
2. Блочная.
3. Табличная.
4. Вёрстка фреймами.
5. Семантическая.

Стоит обратить внимание на блочную (она же дивная - от названия контейнера <div>) и табличную (<table>) верстку. Вёрстка фреймами - это атавизм. В ряде случаев его можно и стоит применять, но в современном сайтостроении этому способу отводят место в музее. Семантическая (по моему скромному разумению) - это извращенная философия, а никак не практическая реализация вёрстки. Поэтому расскажу я о табличной и блочной верстке исключительно.

У таблицы есть следующие основные конструктивные элементы (есть и второстепенные):

1. <THEAD> - группа рядов в шапке таблицы.
2. <TFOOT> - группа рядов в подвале таблицы.
3. <TBODY> - группы рядов, составляющих тело таблицы.
4. <CAPTION> - заголовок таблицы.
5. <COL> - столбец таблицы.
6. <COLGROUP> - группа столбцов.
7. <TR> - ряд ячеек таблицы.
8. <TH> - ячейка заголовка столбца.
9. <TD> - ячейка таблицы.

Каркас из таблицы можно построить, например, следующий:

Код этого примера:

<table style="width:70%; margin:20px auto; border:2px solid #FF4500;">
  <thead>
    <tr>
      <td colspan="2" style="background:gold; height:80px;">
        <b>t h e a d</b>
      </td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2" style="background:gold; height:20px;">
        <b>t f o o t</b>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td width="20%" height="300px" style="background:white;text-align:left;" valign="top">
        t b o d y<br>сайдбар
      </td>
      <td width="80%" style="background:#FFF4BF;text-align:center;" valign="top">
        t b o d y<br>контент
      </td>
    </tr>
  </tbody>
</table>

<tfoot> должен следовать за <thead> и лишь потом идет <tbody>, потому что обозреватель сначала рассчитывает размер верхнего и нижнего блока сайта, а все оставшееся пространство идет под контейнер <tbody>. Шапка и подвал присутствуют в таблице в единственном экземпляре, тел может быть сколько угодно. Подробности по атрибутам и значениям смотрите в спецификации.

Блочная (div'ная) вёрстка

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

Блок запросто может наложиться на соседний, спихнуть соседа по странице вниз или за пределы экрана. Поэтому при блочной вёрстке следует быть куда более внимательным к любой мелочи, нежели при табличной. Один забытый пиксель (рамки, отступы, различная трактовка обозревателями и прочее) может обернуться катастрофой.

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

Элементы div и span в сочетании с атрибутами id и class предоставляют общий механизм для добавления структуры к документу. Эти элементы определяют содержимое как инлайн (span) или уровня блока (div), но не навязывают других идиом представления содержимого.

Спецификация HTML 4.01 в переводе Пирамидина A.

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

Код этого примера:

<div style="width:70%; margin:20px auto; border:2px solid #FF4500;">
  <div style="background:gold; height:80px; padding:5px;">
    <b>h e a d e r</b>
  </div>
  <div style="width:20%; height:300px; background:white; 
              text-align:left; float:left; padding:5px;">
    div<br>сайдбар
  </div>
  <div style="height:300px; background:#FFF4BF; text-align:center;  padding:5px;">
    div<br>контент
  </div>
  <div style="background:gold; height:20px; padding:5px;">
    <b>f o o t e r</b>
  </div>
</div>

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

div { display:table; }

Ознакомьтесь с этим разделом спецификации CSS:

В заключение отмечу, что собственных атрибутов в спецификации 4-ой версии (кроме id и class) блоки не имеют. Всё управление блоками осуществляется через css-свойства. Посмотреть их можно опять же в спецификации: