Блочная и табличная вёрстка — в чём разница

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

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

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

Ну и в завершение последний недостаток этого типа разметки - "подтормаживание" во время загрузки. Всё дело в том, что пока не загрузятся все вложенные в таблицу элементы (особенно это актуально для картинок), таблица не прорисовывается в браузере. Это не может вызывать умиление у посетителей страницы.

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

- ширина (width)
- высота (height)
- обтекаемость (float)
- отмена обтекаемости (к примеру, у контейнера - overflow)

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

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