Вёрстка блочная и табличная: история и практика

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

Как всё начиналось

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

Приём работал во всех браузерах того времени и давал предсказуемый результат. Именно поэтому он так быстро стал стандартом де-факто. Однако у него были серьёзные недостатки, которые проявились по мере роста сайтов.

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

Типичная страница выглядела примерно так:

<table width="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2">Шапка сайта</td>
  </tr>
  <tr>
    <td width="200" valign="top">Меню</td>
    <td valign="top">Основной текст</td>
  </tr>
  <tr>
    <td colspan="2">Подвал</td>
  </tr>
</table>

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

Чем плоха табличная вёрстка для страниц

• Смешение содержания и оформления. Чтобы поменять дизайн, приходится переписывать разметку каждой страницы.
• Раздутый код. Много вложенных тегов, лишние атрибуты, распорки. Страница весит больше и дольше загружается.
• Медленная отрисовка. Браузер часто ждёт загрузки всей таблицы, чтобы вычислить ширину столбцов, и пользователь долго видит пустой экран.
• Плохая доступность. Программы экранного чтения воспринимают таблицу как набор данных и читают её ячейки в порядке, не обязательно совпадающем с логикой страницы.
• Негибкость. Адаптировать такую страницу под телефон или другой размер экрана почти невозможно.
• Сложность поддержки. Правка одного блока тянет за собой смещение соседних.

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

Рождение блочной вёрстки

С появлением каскадных таблиц стилей идея разделения стала реальной. HTML отвечает за смысл и структуру, CSS — за внешний вид. Элементы страницы оформляются блоками (div и семантические теги), а расположение задаётся стилями. Вместо ячеек таблицы вы работаете с обтеканием, позиционированием и, позже, с более мощными моделями раскладки.

Тот же макет блочным способом:

<div class="page">
  <header>Шапка сайта</header>
  <nav>Меню</nav>
  <main>Основной текст</main>
  <footer>Подвал</footer>
</div>

А оформление живёт в отдельном файле стилей:

.page { max-width: 800px; margin: 0 auto; }
nav   { float: left; width: 200px; }
main  { margin-left: 200px; }
footer { clear: both; }

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

Эволюция средств раскладки

Блочная вёрстка тоже прошла несколько этапов:

1. Обтекание (float). Изначально предназначалось для картинок в тексте, но стало основным инструментом колонок. Требовало «очистки» и порождало много хитрых приёмов.
2. Позиционирование. Абсолютное и относительное размещение удобно для отдельных элементов, но плохо для общей сетки.
3. Строчно-блочные элементы и табличные значения display. Имитировали поведение ячеек без таблиц.
4. Flexbox. Одномерная раскладка с гибким распределением места, выравниванием и порядком элементов.
5. Grid. Двумерная сетка, которая решает задачи многоколоночных макетов гораздо проще и надёжнее.

Современные средства делают то, ради чего раньше городили таблицы, но чище и без хаков. Например, трёхколоночный макет в несколько строк кода:

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 16px;
}

Сравнение двух подходов

Когда таблицы всё же уместны

Из этого не следует, что таблицы вне закона. Таблица — отличный инструмент для того, для чего она создана: показа табличных данных. Расписания, прайс-листы, сравнения характеристик, статистика — всё это и должно размечаться тегами table, thead, tbody, th и td. Правильная семантика здесь только в плюс: и пользователям, и роботам понятно, что перед ними именно данные.

Единственная ошибка — применять таблицы для компоновки страницы. Правило простое: если содержимое по смыслу является таблицей, используйте таблицу. Если вам нужна сетка для расположения блоков, используйте CSS.

Практические советы по блочной вёрстке

• Начинайте с семантической разметки без оформления и проверьте, что страница осмысленна даже без стилей.
• Не злоупотребляйте универсальными div, когда есть подходящие смысловые теги.
• Выносите стили во внешний файл и пользуйтесь повторяемыми классами.
• Используйте относительные единицы там, где нужна гибкость.
• Тестируйте макет на разных ширинах экрана и в разных браузерах.
• Для сеток выбирайте flexbox и grid вместо обтекания.
• Держите основной контент в начале документа, а порядок на экране регулируйте стилями.

Как перейти со старой вёрстки

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

Адаптивность как главный аргумент

Сегодня сайт открывают на телефонах, планшетах, ноутбуках и больших мониторах. Фиксированная ширина табличного макета на малом экране превращается в горизонтальную прокрутку и мелкий нечитаемый текст. Блочная вёрстка с гибкими единицами и медиазапросами позволяет перестраивать колонки: на широком экране три столбца, на узком — один под другим. Именно эта гибкость окончательно закрепила победу блочного подхода и сделала возврат к таблицам компоновки бессмысленным.

Заключение

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