Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Табличная и блочная верстка сайта — реальность или миф?

Многие выделяют два типа html верстки сайтов, основываясь на типе элементов (тегов), из которых она состоит. Табличная верстка состоит из таблиц, а блочная — из блоков (слоев). Но так ли это на самом деле?

Табличная и блочная верстка сайта — реальность или миф?
Содержание статьи

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

Табличная верстка

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

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

<table cellspacing="0" cellpadding="0">
...

Аналог в CSS (не так давно стал уверенно применяться на практике, раньше было не кроссбраузерно):

border-spacing: 0;
border-collapse: collapse;

Данный способ является самым надежным и универсальным. Кстати, по умолчанию оба этих атрибута равны 2 (при установленной рамке).

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

Еще одним очень большим плюсом табличной верстки является наболевшая тема с вертикальным выравниванием информации внутри блока. Если содержание блока имеет фиксированную высоту, то тут проблем нет и достаточно просто отнять от высоты контейнера высоту блока с контентом, поделить результат пополам и получить необходимый отступ сверху. Тут все интуитивно понятно и просто, но довольно часто на практике оказывается, что высота элемента заранее неизвестна, и тут нам приходит на помощь замечательное CSS свойство vertical-align: middle;, которое работает только в ячейках таблиц, а в блоках никак не воспринимается.

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

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

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

Существуют ли блочная и табличная верстка по отдельности

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

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

<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

Мы это к тому, что тег p (параграф) является блочным элементом по умолчанию и ведет себя так же как и обычный div, т. е. ему можно задать внешний и внутренний отступ, а также это характеризует перенос курсора до и после параграфа. Так значит и на сайтах с табличной версткой будет достаточное количество блочных элементов. Тогда как мы можем категорично называть эту верстку табличной? Правильно, никак.

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



Предыдущая статья:
Фиксированная, резиновая и адаптивная верстка сайта

Читайте также:
Фиксированная верстка сайта. Особенности, преимущества и недостатки

Возможно, вам это интересно:



Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»