Спор между сторонниками табличной верстки и верстки блоками. Табличная вёрстка VS Блочная вёрстка
Оставьте комментарий 6,950
Как запустить видеоурок:
Разархивировать скачанный файл.
Открыть папку index
.
Запустить файл index.html
в браузере.
Добро пожаловать в видеоурок, посвященный табличной верстке
сайта. Изучив 12 урок по , Вы уже должны уметь работать с . Сейчас же, мы познакомимся с табличной версткой. Наш сайт будет основан на большой таблице. Сверху у нас будет шапка сайта (наверняка вы уже видели такие сайты). Там будет располагаться логотип и еще что-нибудь. Внизу будет футер. Там будут и годы жизни сайта. Слева – меню, справа – контент.
Как сверстать сайт? (Табличная верстка)
Давайте перейдем на рабочий стол и создадим еще одну папку. Папка будет называться site2. Поместим в нее два изображения, которые я подготовил для этого видеоурока: footer.png
и logo.png
. Также давайте скопируем файл index.html
из папки site
в папку site2
. Чтобы скопировать, вы можете нажать правой клавишей мыши на файле и выбрать «копировать» либо использовать комбинацию горячих клавиш Ctrl+C. Чтобы вставить, можно нажать правой клавишей мыши и выбрать «Вставить» либо использовать Ctrl+V.
Теперь давайте откроем наш индексный файл через notepad, удалим все лишнее и ненужное нам, начиная с первой строки, размещенной в тегах .
Главная страница
Теперь создадим нашу таблицу. Пропишем ей ширину в 800 пикселей. Можно прописать и в процентах: 100%, 90%, 80% — на ваше усмотрение. Я прописываю 800 пикселей, так как наш логотип будет шириной в 800 пикселей. Далее прописываем первую строку – это будет шапка сайта. Насколько мы помним, после шапки сайта идет меню и контент, то есть два столбца. Поэтому нам сейчас надо прописать один столбец для нашей шапки и, с помощью атрибута colspan разбить его на два. В первую строку помещаем наше изображение. Так как изображение находится в корневой папке, то путь прописываем просто “logo.png
”. Зададим ширину изображения 800 пикселей и высоту – 100 пикселей. Кстати, нашей строке мы тоже можем задать ширину и высоту. Но ширину нет смысла задавать, так как она у нас задана уже в таблице. Зададим просто высоту.
Теперь давайте создадим вторую строку. Это меню и контент. У нас здесь будет два столбца. Мы их оба пропишем. Сначала первый. Это меню. В ссылке я прописываю решетку. Это значит, что наша ссылка никуда не будет нас перенаправлять при нажатии на нее – оставит нас на нашей же странице. Вставим для наглядности несколько ссылок.
Меню:
Кстати, нам нужно задать для левого блока «Меню» ширину. Пусть будет 200 пикселей. Для второго блока ширину можно не задавать.
Меню:
Теперь займемся контентом. Пишем в нем любой текст. Ширину поставим 600.
Читайте наши новости каждый день и получите подарок от автора.
И создаем последнюю нашу строку – футер. Зададим ему высоту 20 пикселей, атрибут colspan =2 и пропишем путь до изображения footer.png
. Не забудьте положить все изображения, которые я добавил к этому видеоуроку в корневую папку сайта, иначе они у вас не отобразятся. Либо вы можете положить их в любую другую папку и указать к ней путь. Только учтите, что придется указывать этот путь перед указанием имени самого изображения. Установим изображению высоту 20 пикселей и ширину 800 пикселей.
Всё. Сохраняем и проверяем в браузере. Как мы видим, у нас табличная верстка
получилась. Давайте создадим рамку, чтобы разделить блоки.
Переходим в код, прописываем таблице рамку.
Сохраняем, проверяем в браузере. Ну вот, более-менее.
Давайте сделаем выравнивание нашего текста по центру с помощью атрибута align. Также отцентрируем нашу табличку.
Меню:
Добро пожаловать на наш сайт.
Сохраняем, проверяем в браузере. Все получилось. Но тексту в контенте можно придать вертикальное выравнивание.
Перейдем в код.
Добро пожаловать на наш сайт.
Сохраним, проверим. Теперь все хорошо.
Хотя задачей данного видеоурока было рассмотрение табличной верстки сайта, мы к тому же отработали теги, которые изучили в прошлом видеоуроке.
Давайте создадим процентную таблицу. Пусть она будет на всю ширину экрана. Скопируем текст контента из прошлой индексной странички. Наша задача – создать таблицу в процентах. Как это сделать? Для начала нужно удалить ширину или просто сделать ее стопроцентной. Но так как мы вверху укажем, что у нас будет 100%-я ширина, то в футере ее прописывать не нужно. Так же с хедером и контентом. Ширину таблицы заменяем на 100%.
А отображение шапки сайта и футера сделаем с выравнивание по левому краю, чтобы смотрелось симпатичнее.
Сохраняем, проверяем в браузере. Всё получилось, разве что изображение не отображается, так как у нас нет папки site
, но это не страшно, потому что мы уже изучили тему «изображения» и можем это исправить.
Давайте сделаем так, чтобы меню было сверху, с помощью вертикального выравнивания.
Меню:
Сохраним. Посмотрим. В принципе, все. В меню вы можете размещать свои на какие-нибудь другие странички, и у вас получится уже полноценный статичный сайт. На этом я завершаю данный видеоурок. А вы приступайте к следующему, в котором мы рассмотрим используя HTML.
Одним из самых популярных споров между верстальщиками - это, какая вёрстка лучше: табличная или блочная
. Вопрос этот очень спорный и каждый по-своему прав. Хотя я убеждён, что всё зависит от конкретной ситуации, поэтому и блочная вёрстка
, и табличная вёрстка
имеют право на существование. И в этой статье я постараюсь разобрать преимущества и недостатки каждой из них. Чтобы при выборе типа вёрстки для своего сайта, Вы опирались, в первую очередь, на их особенности.
Начну с преимуществ и недостатков табличной вёрстки
:
Таблицы не перекрываются друг с другом при маленьких разрешениях.
Легко делать кроссбраузерный дизайн.
Гораздо проще блочной вёрстки.
Очень много лишнего кода, ввиду бесконечного создания строк и столбцов.
Далеко не каждый дизайн можно создать с помощью таблиц.
Теперь о преимуществах и недостаках блочной вёрстки
:
Значительно меньше HTML-кода
и, как следствие, уменьшение веса страницы.
Блоки загружаются быстрее таблиц (особенно больших таблиц).
Блоки начинают наезжать (либо спадать) друг на друга при маленьких разрешениях экрана.
Вот все преимущества и недостатки блочной и табличной вёрстки
. От себя хочу добавить, что в 99%
Вы будете использовать и то, и другое, но сейчас вопрос стоит о создании самого макета сайта в целом. И здесь я хочу дать Вам рекомендацию, какой из типов вёрстки выбрать.
Блочная вёрстка лучше табличной, НО
при условии, что Вы добьётесь кроссбраузерности и хорошего отображения сайта при разных разрешениях экрана. Данный сайт свёрстан блоками, однако, добиться кроссбраузерности и хорошего отображения на разрешениях (я добился хорошего отображения на разрешениях от 800 на 600
, хотя на практике достаточно от 1024 на 768
) очень тяжело. Об этом я предупреждаю заранее, поэтому если у Вас ещё маленький опыт вёрстки, то забудьте о блочной вообще. Лучше делайте табличную вёрстку.
Вывод
: если Вы ещё недостаточно опытны, то используйте только табличную вёрстку
, иначе принимайте решение в зависимости от конкретного случая. И всегда ответьте себе на вопрос: "Готовы ли Вы к потере огромного количества времени ради совсем небольшой пользы?
".
Каждый человек, который когда-либо хотел создать сайт для своего проекта, сталкивался с проблемой его написания. Не всем хочется платить, да и не каждый бюджет может это позволить, за создание сайта профессиональным веб-мастерам, поэтому большинство начинающих свой путь создателей сайтов начинают изучать методы верстки. Потому что качественного контента и наличия купленного места на сервере для хостинга сайта недостаточно, чтобы он существовал. Первым делом, необходимо создать «скелет» страницы.
Что такое табличная верстка в html?
Чтобы ответить на данный вопрос, необходимо дать определение понятию верстка.
Верстка - процесс создания структуры html-страницы, размещения на ней основных элементов.
Табличная верстка - это, соответственно, использование таблицы с невидимым контуром в качестве структуры страницы. То есть страница сайта будет являться таблицей с некоторым количеством столбцов и строк, где в каждой ячейке будет располагаться определенный элемент.
Макеты html-документов, созданные табличной версткой, используются в подавляющем большинстве сайтов и применяются уже более 10 лет. Это связано с простотой формирования структуры, заполнения, а также с универсальностью такой разметки, которая в разных браузерах отображается одинаково.
Первый этап создания сайта
Табличная верстка начинается с создания разметки: пишется html-код страницы с таблицей, состоящей из определенного количества столбцов и строк.
Для создания таблицы в html используется специальный тег
, открывающий ее. Внутри нее используются теги
для создания строки,
для создания заголовка таблицы и
для создания столбца. Столбцы и заголовки создаются внутри тега строки, причем в каждой строчке может быть создано любое количество столбцов.
Первая таблица
Первый столбец
Второй столбец
Умение создавать таблицу позволяет выполнить html-табличную верстку страницы, поэтому необходимо выяснить, какие атрибуты есть у тегов создания и как ими пользоваться.
Основные атрибуты тегов таблицы
Тег
Данный тег, являясь символом открытия таблицы, служит для ограничения ее структуры, задает ее положение на странице и общий вид всех ячеек, благодаря атрибутам:
Свойство align используется для выравнивая положения таблицы, может принимать значения “left”, “center” и “right”. То есть выравнивание по левому краю, центру и правому краю, соответственно.
Атрибут background позволяет установить фоновое изображение для таблицы по ссылке на него.
Bgcolor задает фоновый цвет таблицы, значением может быть название или код любого цвета.
Border определяет толщину границ таблицы и указывается в пикселях.
Bordercolor устанавливает цвет границы.
Cellpadding позволяет задавать промежутки между текстом и границами ячеек.
Свойство Frame указывает браузеру на режим отображения границ таблицы, принимая значения void, border, above, below, hsides, vsides, rhs, lhs. Что, соответственно, значит не отображать границу, отображать рамку вокруг таблицы, сделать видимой только верхнюю границу или только нижнюю, не скрывать только горизонтальные границы или только вертикальные, отображать только правую или только левую черту.
Атрибут rules несет информацию о том, какие границы ячеек нужно отображать. Значение none позволяет скрыть все границы, all указывает на их отображение, cols задает положение линий между колонками, а rows - между строчками.
Тег
Данный тег создает строку таблицы, отвечает за ее внешний вид. Имеет небольшой набор атрибутов: align для выравнивания текста в строке, bgcolor задает фоновый цвет ячейки, bordercolor устанавливает цвет рамки вокруг строки.
Теги
и
Эти два тега имеют примерно равную функциональность: создают ячейку в строке и устанавливают условия ее отображения, используя атрибуты:
Abbr позволяет сделать краткий комментарий к ячейке.
Background используется для заполнения фона ячейки определенным изображением.
Bgcolor применяется для установки фонового цвета в ячейке.
А bordercolor определяет цвет границ ячейки.
Height служит для задания высоты ячейки.
Nowrap необходим для запрета переноса строки.
Weight задает ширину ячейки.
Пример html-макета сайта
Изучив теорию по работе с таблицами в html, можно приступить к созданию собственной разметки страницы. Для этого следует определиться с тем, какие функциональные блоки будут на вашем сайте. Это могут быть шапка, подвал, контент-блок, боковые блоки. В html-табличной верстке необходимо только создать таблицу.
На самом деле на данном этапе можно создать уже полностью готовый макет, задав внешний вид каждого элемента через свойства тегов, которые описаны выше. И тогда будет нужно лишь скопировать код таблицы на каждую новую страницу сайта, чтобы он имел один стиль. Но это достаточно неудобно, так как стиль страницы будет сохранен только в ее файле, а значит, если появится необходимость что-либо поменять, придется изрядно постараться, чтобы найти необходимый атрибут стиля в каждом документе и изменить его значение. Но существует вариант оптимизации этого процесса посредством использования метода CSS-табличной верстки. Поэтому во время создания html-таблицы нет необходимости использовать атрибуты стилей в документе. Единственный атрибут, который применять придется, это id, позволяющий затем обращаться к стилю только отдельного элемента. Это универсальный атрибут, который применяется с любыми тегами. Он принимает значения, состоящие из латинских букв и символов.
Создавая таблицу, необходимо задать id для тега
, например, со значением “document”. Затем для ячейки (тег
или
), отведенной под шапку, атрибут id может принять значение “header”. Ячейка левого меню может быть названа “left_side”, а правого - “right_side”. Блок контента, допустим, будет назван “content”, а подвал сайта - “footer”.
Так будет отображаться страница в браузере.
Второй этап верстки
Созданный документ нужно подключить к стилевому файлу CSS, для того чтобы управлять внешним видом объектов страницы. Для этого необходимо создать CSS-документ, назвать его, к А теперь внутри в основном документе страницы нужно прописать следующее: .
После этого, прописывая в mystyle.css условия отображения элементов, вы сможете изменять внешний вид страницы так, как вам это будет угодно. Например, свойство color задает цвет текста, а background определяет, как будет выглядеть фон элемента. Существует около 20 основных свойств, применяя которые, можно изменять положение элементов, их размеры, цвет и выделение. Поэтому такая верстка не является очень сложной и может быть выполнена даже новичком, а насколько креативно и интересно получится, зависит только от вас.
CSS-верстка
Как известно, сейчас между табличной и блочной версткой в html большинство веб-мастеров выбирает именно вторую. Это связано прежде всего с тем, что код табличной верстки получается очень громоздким, и это тормозит загрузку сайта. Объемность кода объясняется наличием сложной структуры тегов таблицы (3 уровня:
, затем
, и только после
.) Данное обстоятельство перекрывает даже такие очевидные преимущества табличной верстки, как четкая иерархия элементов, фиксированное положение, кроссбраузерность и простота верстки. Но существует решение этой проблемы именно в языке каскадных таблиц стилей (CSS).
Табличная верстка через CSS может быть осуществлена, если, например, в документе присутствуют только отдельные элементы, заключенные в тег
, которые не являются таблицей. Чтобы оптимизировать код, можно создавать табличные документы прямо через свойства стилей. Для этого используется свойство display, которое указывает браузеру на то, как воспринимать тот или иной элемент в документе. Так, например, если значение table, то элемент отображается как таблица, а если table-row или table-cell - строка таблицы и ячейка соответственно. Таким образом, пропадает необходимость в использовании тегов таблицы в html наборе.
Адаптивная табличная верстка
Адаптивная верстка предполагает изменение отображения сайта на разных экранах в зависимости от разрешения и размера дисплея. Это достаточно непростая задача для разработчика, так как требует тщательных расчетов и тестирования на многих платформах. Тем не менее любой популярный современный ресурс невозможно представить без использования адаптации под разные устройства. И для решения данной задачи применяется CSS.
Во-первых, чтобы во всех браузерах стиль сайта был единым, нужно обнулить все браузерные стандарты отображения с помощью чтобы избавиться от нестандартных отступов, выделений и подобного.
Во-вторых, необходимо получать медиа-запросы от устройств, подключающихся к ресурсу, для того чтобы получить информацию о разрешении экрана и применить адаптацию. Для этого в основном используются свойства min-width, max-width и display. Первые два определяют границы расширения блока, а свойство display со значением none позволяет скрывать большие и нефункциональные блоки на дисплеях с небольшим разрешением.
Примеры
Не имеет значения, каким методом воспользуется разработчик для создания разметки, он сможет оформить ее с применением CSS настолько уникально и эстетично, насколько хватит фантазии. Ниже представлены примеры HTML-табличной верстки.
Еще один пример.
А можно оформить и так.
На самом деле совсем не важно, что табличная верстка уже не выглядит современно и актуально - это легко компенсируется креативностью и грамотностью дизайнерского оформления.
Когда сторонники табличной верстки
объясняют, почему они применяют именно табличную верстку
, а сторонники верстки блоками
объясняют, почему они предпочитают верстку блоками
это одно. А когда между ними начинается спор это другое. Спор о способах верстки
дело тупиц: одни тупицы не хотят отойти от старых привычек, другие не хотят признать что ни в HTML 4.1, ни в CSS 2 нет иных механизмов для создания вертикальных колонок, кроме как создание их с помощью таблиц
.
Основная проблема верстальщиков таблицами заключается в том что, они суют эти таблицы
, куда ни попадя и, уже чуть ли не пробелы между словами создают за счет заключения слов в отдельные таблицы (лежащие внутри предложения, заключенного в таблицу, лежащую внутри абзаца, заключенного в таблицу, лежащую ). Возможно, я самый первый, кого это нагромождение таблиц стало раздражать. По крайней мере, я писал о нем еще в 2003 году (см. Правила плохого тона), когда споров между сторонниками табличной и безтабличной верстки
не было и в помине.
У верстальщиков блоками проблема иная: погнавшись за модой, они потеряли способность здраво рассуждать. Они утверждают что, верстают за счет CSS, но CSS управляет не только внешним видом блоков
, но и внешним видом таблиц
и, таким образом, можно утверждать что, табличная верстка
тоже, за счет CSS делается. Они утверждают что, их код компактней, а потому быстрее грузится, но если посмотреть на применяемые ими растяжки, хаки и прочие хитрости, используемые для того чтобы уподобить блоки таблицам
, становятся очевидными три вещи:
В умелых руках код блоками
более компактен, но в исполнении этих «мастеров», эффект получается обратным
Блоки
это не колонки.
Дизайн блоками
держится на честном слове. С применением другого браузера, он расползется, как ему вздумается.
Откуда весь сыр-бор пошел?
Если уж люди так стремятся имитировать таблицы
, почему бы им просто не применить эти самые таблицы
?
Одним из преимуществ безтабличной верстки
является именно то что, при неудачном стечении обстоятельств она расползается. Это может показаться странным: если таблицы
так надежны, так непоколебимы, в чем же может быть преимущество ненадежных заколебывающих блоков
?
Считается что, мобильные устройства плохо понимают таблицы
.
Не знаю, так ли это. Я с телефона в интернет не лазаю. Мне не интересно изучать документацию по PHP через лупу. Кроме того, на моем телефоне не установлен сервер Апачь с поддержкой SQL баз для отработки скриптов, которые приходят мне в голову по мере чтения документации (это все, конечно же, шутка, на самом деле, на моем телефоне, конечно же, установлен SQL сервер;).
Именно с расчетом на это и делаются блоки
. Ну, расползутся они а все же лучше чем запорченные таблицы
.
Не знаю, так ли это, или нет, а только все это только до поры, до времени. Придет время, когда даже самые дешевые телефоны смогут корректно отображать даже самые мудреные таблицы
, а параллельно, в какой-нибудь спецификации, типа HTML 4.5 появится тег, позволяющий формировать колонки (если, конечно, снобизм спецификаторов не заснобит их специфицировать).
Так же, считается что, блочный дизайн
быстрее отображается, так как отображение таблицы происходит только
после загрузки всей таблицы. ;)
Люди, а вы вообще, читали документацию по HTML и CSS?
«ПА должны иметь возможность начинать показ таблицы до того, как все данные будут получены». «Для отображения по частям, браузеру нужно "знать" количество столбцов и их ширину»
Свойство CSS table-layout:fixed
«Алгоритм фиксированного вывода
В этом (быстром) алгоритме горизонтальный вывод таблицы не зависит от содержимого ячеек; он зависит только от ширины таблицы, ширины столбцов и от рамок и заполнения ячеек.
Ширина таблицы может быть специфицирована явно свойством "width". Значение "auto" отменяет алгоритм фиксированного вывода.
В алгоритме фиксированного вывода ширина каждого столбца определяется так:
Элемент столбца со значением свойства "width", отличным от "auto", устанавливает ширину этого столбца.
Иначе, ячейка в первом ряду со значением свойства "width", отличным от "auto", устанавливает ширину этого столбца. Если ячейка занимает более одного столбца, ширина разделяется на эти столбцы.
Любые оставшиеся столбцы равномерно разделяют оставшееся горизонтальное пространство таблицы (минус рамки и заполнение ячеек).
При таком методе ПА может начать вывод таблицы сразу, как только будет получен весь первый ряд
. Ячейки в последующих рядах не влияют на ширину таблицы. Любая ячейка, имеющая переполняющее содержимое, использует свойство "overflow" для определения того, сжимать ли переполняющее содержимое».
Если же, указать ширину и количество колонок (
) или даже просто ширину ячеек, отображение ячеек производится без ожидания загрузки остальных ячеек своего ряда. Таким образом, ТАБЛИЧНЫЙ ДИЗАЙН
МОЖЕТ ОТОБРАЖАТЬСЯ ТАК ЖЕ БЫСТРО, КАК И БЛОЧНЫЙ
.
Выходит что, верстка блоками
ориентирована на некие гипотетические несовершенные устройства, которые пока еще не в полной мере соответствуют спецификациям HTML и CSS. Во всем остальном это все те же яйца, только вид с боку. На данных гипотетических устройствах верстка блоками
позволяет увидеть удобочитаемый текст, лишенный какого либо дизайна. Любопытно было бы увидеть, чем этот обезображенный внешний вид лучше обезображенного внешнего видатабличной верстки
на этом же устройстве.
Какая верстка лучше, блочная или табличная?
Я не собираюсь затевать новый спор о том, какая верстка лучше, так как приемлемость той или иной верстки в конкретном случае зависит от:
1) Личных предпочтений
2) Конкретного дизайна
Верстайте так, как сочтете наиболее правильным и никого не слушайте. Не стоит прогибаться под изменчивый мир. Пусть лучше он прогнется под нас.
Примеры решений табличной и блочной верстки.
Верстка дивами
всегда построена на различных трюках, так как «дивные» верстальщики не понимают: дивы не предназначены для многоколоночной верстки
, и упорно пытаются найти того, кто бы решил, как сделать массшабируемый многоколоночный дизайн без использования таблиц
, да еще так, чтобы он одинаково выглядел во всех браузерах, и подарил решение им. Я, по большому счету, не понимаю, в чем проблема. Согласен, так вкладывать таблицы друг в друга плохо:
Резиновая верстка HTML страниц блоками - живой пример
1
Верстка блоками 1
Верстка блоками 2
Верстка блоками 3
Верстка блоками 4
Верстка блоками 5
Верстка блоками 6
2
3
4
5
Лично мне все равно, как верстать. Но заказчик ориентируется на браузеры Геко, Опера, ИЕ. Самым надежным и бесхитростным решением является табличная и смешанная верстка
. Текстовые браузеры так же, нормально понимают таблицы (только показывают, как обычный текст). Я не знаю, в какой ситуации блоки
воспринимаются лучше, и не вижу причин за них цепляться. Смешанный вариант с моей точки зрения оптимален. Однако вы можете выбирать другие. Исходные коды приведены.
Последний раз мне пришлось верстать блоками осенью 2007 года. 2 события положило конец моей блочной верстки:
Однажды, думаю, летом 2007 года я сверстал очередной сайт блоками. Заказчик открыл его на каком-то мобильном устройстве и написал, что сайт весь вытянулся в линию. Я ответил, что так и должно быть, что на мобильных устройствах таким образом удается избежать горизонтальной прокрутки. Но заказчик сказал, что лучше пусть будет горизонтальная прокрутка, но сайт везде должен выглядеть одинаково... Пришлось переверстать таблицами.
Второй случай с точностью наоборот: осенью того же года я сверстал очередной сайт и заказчик, открыв его на мониторе с разрешением 1600 пикселей по горизонтали (это был невиданный в те времена размер!), начал его наполнять, пихая неэластичные элементы, такие как таблицы с данными и рисунки, под завазку... В результате при разрешении в 1024 пикселя, которое было у простых смертных, сайт расползался...
Не могу ж я следить за каждой новой страницей, которую создает себе владелец сверстанного мной сайта, чтоб ее не расперли больше положенного. Не могу я и гарантировать то, что открыв свой сайт на мобилке и обнаружив вытягивание его в линию, владелец не начнет требовать переделывать все так, чтоб не вытягивалось. Делать блочные сайты фиксированной ширины тоже не метод – кто-то воткнет широченный рисунок или прайс в пол сотни колонок, и они вылезут в пустоту... Табличная верста надежней: Когда сайт достается детям, им лучше дать что-то цельнолитое, да еще и круглое, чтоб отламывать было нечего. Вобщем, для себя можно верстать по всякому. Но для клентов, которые не просят именно блоками (а таких у меня просто небыло, так как те, кто понимают, что сайты бывают сверстаны таблицами или блоками, обычно делают сайты сами), я решил верстать именно таблицами (смешанный вариант).
П. С. Не нужно меня критиковать за то, что я сдал позиции. 10 лет назад я такую верстку придумал. У меня до сих пор валяются 2 экземпляра за январь и ноябрь 2004 года, которые использовались при обсуждении проектов. Кому любопытно, могут скачать и посмотреть: январь 2004, блочная верстка , ноябрь 2004, блочная верстка с блоками одинаковой (не фиксированной) высоты и древовидным меню . С приходом мобильных устройств в интернет такая верстка стала приобретать популярность. Теперь у блочной верстки и без меня хватает сторонников, так что, я могу смело идти на пенсию:)
В подтверждение своих слов, приведу 4 сайта созданных весной-осенью 2007 года (из более ранних в неизменном виде остался только 2, но они сделаны смешаной версткой):
Даже в 2007 году верстка блоками была новшеством.
Ну и, конечно же, (использовался на сайте, которого больше не существует, работал только в ИЕ; универсальный вариант описан и применен в форме заявки в 2006-м, хотя первые попытки придумать аякс предпринимались мной в 2003-2004 внедряемое плавающее оглавление но статьи эти тогда распространялись рассылкой). Технологии создавались и пропагандировались разными людьми и, в итоге, приобрели современный вид, завоевали популярность. Не ограничивайтесь использованием чужих разработок. Экспериментируйте. Возможно вы станите родоначальником новых стандартов.
Для тех, кто осилил мое лирическое отступление и дочитал до этого места, не... БОЛЬШОЙ приз: с левым и правым блоком помещенным после
основного блока. Идиология размещения блоков именно так, предполагает что, посетитель на медленном соединении, вначале увидит загруженный текст и сможет читать то, зачем пришел, не дожидаясь, пока загрузится все остальное (в классическом случае последовательного размещения, вначале левого блока, потом центра и за ним правого, до загрузки основного текста должен был бы загрузиться левый блок).
Версия для печати
Верстка блоками и версия для печати
В давние времена версия для печати предполагала наличие двух документов с разным оформлением. К примеру, основная страница http://site.ru/article1.html со ссылкой на версию для печати, и она же по адресу http://site.ru/article1.html?to=print. При запросе страницы по стандартному адресу, серверный скрипт приклеивал к ней голову, хвост и меню (если угодно, при наличии не только блока с меню слева, но и блока новостей справа, он приклеивал к странице лапы). Если же страница запрашивалась с параметром to=print, серверный скрипт выдавал тело документа без всякой требухи, скажем так, «филейную часть» (видать, сказывается то, что недавно, я вкусно поужинал). При этом, версии с параметром to=print имело смысл закрыть от индексации (дублирующие материалы без возможности перейти на другую страницу – тупиковая ловушка для поисковика). По этой причине, создание версий для печати было удобно поручить отдельному скрипту, закрытому от индексации (смотрите пример ). Иногда данную методику имеет смысл применять и сейчас (как в примере, где, помимо всего прочего, не распечатываемая интерактивная карта, заменяется пригодным для печати статическим рисунком). Но очень часто (так можно было бы поступить и в указанном примере, если б не желание, сделать основную версию покаппактней), двойную версию удобно реализовать с помощью блоков. Для этого создается две таблицы стилей:
Первая для всех устройств, вторая для принтера. В принтерной версии для таких элементов, как блок меню и прочая, ставится display:none, а для основного текста страницы убираются фоновые рисунки (background:none) и, при необходимости ставится float:none (большие плавающие элементы, продолжение которых оказывается на следующей странице могут не распечататься). Так же, стоит поставить шрифт с засечками, указав размер в пунктах, убрать ненужные отступы и, возможно, показать адреса ссылок (a:after {content: " (" attr(href) ") "} - сработает не во всех браузерах, но, где сработает, может оказаться полезным). Вобщем, открывайте всю ту же блочная верстка в духе WEB 2.0 и делайте предварительный просмотр перед печатью (или просто посылайте на печать). Смотрите код, думаю, разберетесь без лишних комментариев.
Верстка таблицами и версия для печати
Как легко, оказывается, используя блочную верстку, сделать версию для печати! Не нужно никаких серверных скриптов. Но в табличной верстке это делается не менее легко. Нужно только прекратить прописывать width=100 valing=top и другие атрибуты в сами ячейки. Задайте ячейкам классы, вынесите определение классов в стили и сделайте стили версии для печати. Все! Никакой разницы! Верстка таблицами с версией для печати к вашим услугам. В данном случае блочная верстка опять не имеет никаких преимуществ перед табличной.
Общие выводы о верстке блоками и таблицами
Так как же верстать? ...да как попало:) Если с утра встали на левую ногу, значит верстать блоками, если на правую, тогда, конечно, очередь табличной верстки.
Ну а если всерьез, то способ верстки определяется квалификакией верстальщика, конкретной ситуацией (если квалификакия позволяет верстать и так и эдак) и настроением (если и так и эдак позволяет верстать ситуация). По-настоящему эластичный дизайн можно сделать только таблицами. Недостаток блоков заключается именно в том, за что их хвалят: они отображаются сразу, в то время как таблица, если ей не поставить table-layout:fixed, отображается построчно. Проблема в том, что отобразившись сразу, блоки не перерисовываются, в то время, как таблица перерисовывается с каждой новой строкой и, при необходимости, ее размеры переопределяются. Посмотрите: вот так ведут себя в окне, слишком маленьком для втиснутого в них широкого элемента (прокрутите вправо и посмотрите. как выглядит шапка). Это не блоки. Я просто взял для примера один из проектов обсуждавшихся мной в 2006 году, и слегка изменил. Но блоки ведут себя именно так. А вот так выглядит. Как вам больше понравился бы ваш сайт на маленьком мониторе (например, в КПК или нетбуке)? Конечно, все блоки можно заставить перерисоваться по завершению загрузки страницы скриптами. Но в достаточно сложном макете вес такого скрипта может превысить вес самой страницы. В чем тогда выгода верстки блоками?
Хороша ложка к обеду. И блоки хороши там, где уместны. Уместны ли они в вашем конкретном случае решать вам.
Документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег
).
Метод получил широкое распространение во времена предшествовавшие появлению стандарта CSS , так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять свое положение и размер на экране вне зависимости от размера окна браузера , тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять свое местоположение относительно остальных объектов документа.
Некоторые полагают, что табличная верстка нарушает основную идею создания языков разметки - визуальное отображение документа должно автоматически получаться из логической разметки и не зависеть от его непосредственного содержания. Иными словами, использовать таблицы следует только для отображения табличных данных: статистик, расписаний, сравнительных характеристик и пр., а для расположения элементов документа следует использовать CSS
Тем не менее, табличная верстка остается наиболее удобной и простой в освоении, потому многие веб-разработчики продолжают ею пользоваться. Этот метод верстки зарекомендовал себя, как наиболее стабильный и надежный, в то время как блочная верстка сложна в реализации, имеет проблемы с совместимостью с разными браузерами и т. п.
До появления CSS оформление веб-страниц осуществлялось непосредственно внутри содержимого документа (табличная верстка). Однако с появлением CSS стало возможным принципиальное разделение содержания и представления документа (блочная верстка). За счёт этого нововведения стало возможным лёгкое применение единого стиля оформления для массы схожих документов, а также быстрое изменение этого оформления.
Сразу следует оговорить, что спор вокруг таблиц происходит только в том случае, когда они используются для верстки. Если дело касается хранения табличных данных, то не возникает сомнений, что таблицы именно для этой цели и предназначены.
Примечания
Wikimedia Foundation
.
2010
.
Idesk
Смотреть что такое "Табличная вёрстка" в других словарях:
Вёрстка веб-страниц
- Вёрстка веб страниц процесс формирования веб страниц в текстовом либо WYSIWYG редакторе, а также результат этого процесса, то есть собственно веб страницы. По принципам использования средств разметки HTML различают логическую разметку и… … Википедия
Резиновый тип макета
- (англ. adaptable fluid). Тип макета переменных ширины, относительного положения элементов и постоянных размеров, пропорций размеров элементов страницы относительно разрешения монитора. Как правило, для макета используется табличная вёрстка,… … Википедия
Фиксированный тип макета
- (англ. rigid fixed) тип макета постоянных размеров и пропорций элементов страницы относительно разрешения монитора. Как правило для макета используется табличная вёрстка, но может так же применяться как чисто div, так смешанное применение… … Википедия
Верстка веб-страниц
- Вёрстка веб страниц процесс формирования веб страниц в текстовом либо Вёрсткой веб страниц занимаются верстальщики веб страниц. Содержание 1 Основные идеологии вёрстки веб страниц 1.1 Вёрстка с помощью слоёв … Википедия
