Опубликовал HaZarD 25.04.2024 в раздел: Отдельные уроки | 0 комментов

Здравствуйте уважаемые посетители! Тема нашей очередной статьи – сравнение двух типов верстки (блочного и табличного). Мы рассмотрим их достоинства и недостатки, попробуем найти оптимальный и максимально эффективный тип верстки…

Итак, начнём с описания старейшего типа верстки – табличного. Он основан на теге
“table” и имеет примерно такую структуру:

<table> <tr> <td>Содержание первого столбца</td> <td>Содержание второго столбца</td> </tr> </table>

Таким образом, мы задали таблицу, состоящую из 1 строки и 2 столбцов. Для ясности: “tr” обозначает строку, а “td” – столбец.
- По умолчанию, для таблиц применены следующие стили:
- Граница (border): 0 пикселей (нет)
- Поля ячеек (cellpadding): 1 пиксель
- Интервал ячеек (cellspacing): 2 пикселя

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

Блочной вёрсткой, называется вёрстка, выполненная без использования таблиц. В HTML-коде используются такие теги как div, span и многие другие. Сама же форма страницы с помощью стилей (CSS). По логике нашего ресурса, мы должны были бы поддержать блочную вёрстку, но… тут есть свои тонкости. Сначала опишу хорошие стороны блоков:
- Малый размер кода
- Основа дизайна – CSS
- Широкие возможности позиционирования элементов
- Быстрая загрузка страниц
Теперь о плохом:
- Практически никогда не удаётся достигнуть полной кроссбраузерности
- Метод сложен для понимания новичками
- Большой файл стилей
Вот и всё с общим описанием, теперь приступим к анализу.

Очень многие веб-разработчики, которые считают себя «продвинутыми» призывают к полному отказу от табличной верстки, как от устаревшего способа. Но эти люди частенько забывают одну очень важную деталь – многие посетители их сайтов будут пользоваться устаревшими браузерами, которые могут поддерживать CSS только на базовом уровне (Internet Explorer 6, например). В некоторых типах браузеров и ОС могут происходить неприятные искажения.
Вот тогда и начинаются различные скрипты, исправляющие эти изъяны и практически сводящие на нет все преимущества CSS.
В моей практике были случаи, когда идеальные с точки зрения HTML и CSS блоки вели себя неадекватно от некоторых типов активного содержимого.
Есть ещё, конечно, проблема свободно позиционированных объектов, а точнее проблема не в них, а в понимании таких объектов браузерами Internet Explorer.
Итак, мы выяснили, что чистая блочная вёрстка не эффективна. Как на счёт табличной? Действительно, многие браузеры загружают таблицу как единое целое, замедляя таким образом работу сайта. Действительно, таблицы делают код излишне объемным. Действительно, табличная вёрстка в какой-то степени ограничивает фантазию дизайнера.
Вот и закончен наш анализ. Он показал, что мы, без сомнения, можем создать шаблон только на блоках, или только на таблицах. Однако, должен заметить, что и тот, и другой шаблоны не будут совершенными (есть исключения, разумеется).
Самым логичным типом вёрстки – будет грамотный «симбиоз» таблиц и блоков, их дополнение друг друга. Именно такой подход позволит создавать действительно качественные сайты.

Спасибо за внимание!