Вторник, 10 Апреля 2012 08:23

Плюсы и минусы табличной и блочной верстки

Written by 
Оцени эту запись
(3 Голоса)

Как ты верстаешь - таблицами или блоками? Это вопрос можно услышать на собеседовании. Часто в описании вакансии можно встретить четкие требования по способу верстки. 

 

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

 

Итак, приступим. Что же такое блочная/табличная верстка? Первым делом верстальщик делает шаблон страницы (я бы сказала layout) - сверху шапка сайта ([header), внизу подвал (footer), левая колонка, правая, центральная часть с контентом. И вот именно этот момент можно делать с помощью таблицы или с помощью блоков, то есть элеметов <div>.

 

Табличка:

<table>

<tr>

<td colspan="3">Header</td>

</tr>

<tr>

<td>Right block</td><td>Center block</td><td>Left block</td>

</tr>

 

<tr>

<td colspan="3">Footer</td>

</tr>

</table>

 

 

Тут вроде бы все просто. Позже поговорим о плюсах и минусах этого метода.

 

 

Блочная верстка:

<div>Header</div>

<div>Right block</div>

<div>Center block</div>

<div>Left block</div>

<div>Footer</div>

 

Ну, конечно там еще классы должны быть с определенными стилями, но смысл понятен.

 

Приступим к сравнению. Рассмотрим для начала плюсы блочной верстки перед табличной:

 

  • Меньше html кода, он проще читается, в нем легче что либо найти
  • Легко можно изменить шаблон старницы, ипсользуя только стили. Например, вздумалось левую часть с правой поменять, меняем float:left на float:right и все. Ну это я так, по простому. Но суть в том, что с таблицей так не сделаешь, нужно лезть в шаблон, ковырять код.
  • Легко добавить новый элемент на страницу и поставить его хоть сбоку, хоть внизу. Сам код можно прописать в любом месте страницы, а с помощью css расположить его там, где нужно.
  • Страница быстрее загружается.

 

Минусы блочной верстки перед табличной:

 

  • Страничку, сверстаную блоками, сложнее сделать одинаковой в разных браузерах. С этим будет больше мороки, чем в случае табличек.
  • Блок имеет высоту, определенную внутренним контентом. Потому очень сложно сделать ему высоту 100% от родительского. А это нужно, например, если у какой-то из частей (левой, правой) фон другого цвета или между ними должен быть border. С этим, конечно, у таблт\ицы проблем нету.

 

Вот так. Каждый сам выбирает, что ему больше нравится. Потому выбор за тобой. Но выбор блочной верстки или табличной, не означает абсолютный отказ от другого. Это относится только к каркасу страницы. Конечно, внутри блока может быть таболичка, а внутри таблички - блок.

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов