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

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

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

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

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

Теги для создания таблиц были рассмотрены в соответствующей статье. Ниже приведён пример их использования.

Итак, пример табличной вёрстки:

Если поместить этот код в тело HTML-документа и открыть получившийся файл в браузере, то страница будет выглядеть так:

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

Но взглянем на код с пояснениями.

• Тег

Я разделил 100% ширины страницы на две части: 20% отдал под блок навигации, 80% - под основной контент.

В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2 делаю, чтобы низ сайта занимал по горизонтали сразу две ячейки, как шапка - эти части, в отличие от тела страницы, на блоки в моём случае делить не нужно.

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

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

Когда сторонники табличной верстки объясняют, почему они применяют именно табличную верстку , а сторонники верстки блоками объясняют, почему они предпочитают верстку блоками – это одно. А когда между ними начинается спор – это другое. Спор о способах верстки – дело тупиц: одни тупицы не хотят отойти от старых привычек, другие не хотят признать что ни в HTML 4.1, ни в CSS 2 нет иных механизмов для создания вертикальных колонок, кроме как создание их с помощью таблиц .

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

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

1. В умелых руках код блоками более компактен, но в исполнении этих «мастеров», эффект получается обратным
2. Блоки – это не колонки.
3. Дизайн блоками держится на честном слове. С применением другого браузера, он расползется, как ему вздумается.

Откуда весь сыр-бор пошел?

Если уж люди так стремятся имитировать таблицы , почему бы им просто не применить эти самые таблицы ?

Одним из преимуществ безтабличной верстки является именно то что, при неудачном стечении обстоятельств она… расползается. Это может показаться странным: если таблицы так надежны, так непоколебимы, в чем же может быть преимущество ненадежных заколебывающих блоков ?

Считается что, мобильные устройства плохо понимают таблицы .

Не знаю, так ли это. Я с телефона в интернет не лазаю. Мне не интересно изучать документацию по PHP через лупу. Кроме того, на моем телефоне не установлен сервер Апачь с поддержкой SQL баз для отработки скриптов, которые приходят мне в голову по мере чтения документации (это все, конечно же, шутка, на самом деле, на моем телефоне, конечно же, установлен SQL сервер;).

Именно с расчетом на это и делаются блоки . Ну, расползутся они – а все же лучше чем запорченные таблицы .

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

Так же, считается что, блочный дизайн быстрее отображается, так как отображение таблицы происходит только после загрузки всей таблицы. ;)

Люди, а вы вообще, читали документацию по HTML и CSS?

«ПА должны иметь возможность начинать показ таблицы до того, как все данные будут получены». «Для отображения по частям, браузеру нужно "знать" количество столбцов и их ширину»

Свойство CSS table-layout:fixed

«Алгоритм фиксированного вывода

В этом (быстром) алгоритме горизонтальный вывод таблицы не зависит от содержимого ячеек; он зависит только от ширины таблицы, ширины столбцов и от рамок и заполнения ячеек.

Ширина таблицы может быть специфицирована явно свойством "width". Значение "auto" отменяет алгоритм фиксированного вывода.

В алгоритме фиксированного вывода ширина каждого столбца определяется так:

Элемент столбца со значением свойства "width", отличным от "auto", устанавливает ширину этого столбца.

Иначе, ячейка в первом ряду со значением свойства "width", отличным от "auto", устанавливает ширину этого столбца. Если ячейка занимает более одного столбца, ширина разделяется на эти столбцы.

Любые оставшиеся столбцы равномерно разделяют оставшееся горизонтальное пространство таблицы (минус рамки и заполнение ячеек).

При таком методе ПА может начать вывод таблицы сразу, как только будет получен весь первый ряд . Ячейки в последующих рядах не влияют на ширину таблицы. Любая ячейка, имеющая переполняющее содержимое, использует свойство "overflow" для определения того, сжимать ли переполняющее содержимое».

Если же, указать ширину и количество колонок (

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

Какая верстка лучше, блочная или табличная?

Я не собираюсь затевать новый спор о том, какая верстка лучше, так как приемлемость той или иной верстки в конкретном случае зависит от:

1) Личных предпочтений

2) Конкретного дизайна

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

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

Верстка дивами всегда построена на различных трюках, так как «дивные» верстальщики не понимают: дивы не предназначены для многоколоночной верстки , и упорно пытаются найти того, кто бы решил, как сделать массшабируемый многоколоночный дизайн без использования таблиц , да еще так, чтобы он одинаково выглядел во всех браузерах, и подарил решение им. Я, по большому счету, не понимаю, в чем проблема. Согласен, так вкладывать таблицы друг в друга плохо:

Но можно использовать colspan и rowspan:

Однако, так еще лучше:

Но может так:

1

5

Еще в 2003 году я писал о вариациях меню (см. Организация ссылок. Всевозможные оглавления) и между делом, сделал так:

При желании, можно добавить еще колонку.

Лично мне все равно, как верстать. Но заказчик ориентируется на браузеры Геко, Опера, ИЕ. Самым надежным и бесхитростным решением является табличная и смешанная верстка . Текстовые браузеры так же, нормально понимают таблицы (только показывают, как обычный текст). Я не знаю, в какой ситуации блоки воспринимаются лучше, и не вижу причин за них цепляться. Смешанный вариант с моей точки зрения оптимален. Однако вы можете выбирать другие. Исходные коды приведены.

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

1. Однажды, думаю, летом 2007 года я сверстал очередной сайт блоками. Заказчик открыл его на каком-то мобильном устройстве и написал, что сайт весь вытянулся в линию. Я ответил, что так и должно быть, что на мобильных устройствах таким образом удается избежать горизонтальной прокрутки. Но заказчик сказал, что лучше пусть будет горизонтальная прокрутка, но сайт везде должен выглядеть одинаково...
   Пришлось переверстать таблицами.
2. Второй случай с точностью наоборот: осенью того же года я сверстал очередной сайт и заказчик, открыв его на мониторе с разрешением 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 Вёрстка с помощью слоёв … Википедия

Существует два способа верстки сайтов – табличный и блочный. И один из вопросов, которые задает себе веб-мастер, собирающийся делать сайт: «Какой из этих способов выбрать?».

В чем же достоинства и недостатки того и другого способов верстки сайтов?

Прежде чем ответить на этот вопрос, необходимо разобраться в том, что такое верстка сайта.

Под версткой сайта мы понимаем преобразование макета сайта (рисунка в формате PSD) в HTML-документ. Макет сайта обычно представляет собой многослойный документ в формате Photoshop, и задача верстальщика состоит в том, чтобы описать все элементы этого макета в HTML-документе так, чтобы этот документ в браузере отображался также как и исходный рисунок.

И сделать это можно с помощью таблиц или блоков. И то и другое нужно для правильного позиционирования элементов страницы относительно друг друга.

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

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

Рассмотрим более подробно эти два способа.

Сложность.

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

Возможности.

Зато возможности блочной верстки гораздо шире. С помощью блоков можно создать любой, самый сложный дизайн.

Еще одно достоинство сайтов, сделанных с помощью блоков, — скорость загрузки. Объясняется это компактностью кода при блочной верстке. Кроме этого, страница с табличной версткой не появится на экране монитора, пока не загрузятся все элементы этой таблицы. Создается впечатление, что загрузка такой страницы происходит медленнее.

Кроссбраузерность.

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

Итак, каковы же выводы?

Блочная верстка лучше табличной, поэтому используется она все шире, но с табличной проще разобраться. И я рекомендовал бы начинать изучение сайтостроения именно с использования таблиц, а потом разбираться с блоками.

Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.

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

Похожие советы

Что означают буквы«мм»: все возможные значения В контакте русская версия

Электронные самоделки для радиолюбителей и начинающих электриков

Samsung GT-I9003 сброс до заводских настроек Что такое Hard reset Samsung GT-I9003

Samsung GT-I9003 сброс до заводских настроек Как сделать полный сброс данных на телефоне Samsung Galaxy S scLCD GT-I9003 из меню настроек

Что делать, если телефон сам перезагружается

Телефон Android не включается дальше логотипа (не хочет загружаться)