Каркас веб-страницы. Табличная верстка

, которые не являются таблицей. Чтобы оптимизировать код, можно создавать табличные документы прямо через свойства стилей. Для этого используется свойство display, которое указывает браузеру на то, как воспринимать тот или иной элемент в документе. Так, например, если значение table, то элемент отображается как таблица, а если table-row или table-cell - строка таблицы и ячейка соответственно. Таким образом, пропадает необходимость в использовании тегов таблицы в html наборе.

Адаптивная табличная верстка

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

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

Во-вторых, необходимо получать медиа-запросы от устройств, подключающихся к ресурсу, для того чтобы получить информацию о разрешении экрана и применить адаптацию. Для этого в основном используются свойства min-width, max-width и display. Первые два определяют границы расширения блока, а свойство display со значением none позволяет скрывать большие и нефункциональные блоки на дисплеях с небольшим разрешением.

Примеры

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

Еще один пример.

А можно оформить и так.

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

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

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

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

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

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

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

навигация	заголовок
Ссылка 1 Ссылка 2 Ссылка 3	контент

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

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

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

• Тег

открывает таблицу.

Атрибут border задаёт толщину табличных рамок.

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

закрывает ячейку.

Текст между тегами

- это и есть содержимое ячейки, ради него всё и делалось.

- конец строки.

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

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

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

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

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

шапка сайта (логотип, слоган, телефон)		- открывающий тег ячейки заголовка таблицы. В отличие от других, текст в этой ячейке будет выровнен по центру и выделен полужирным. Colspan - атрибут, значение которого определяет, сколько ячеек по горизонтали относительно других строк текущий элемент будет занимать.	и
навигация	заголовок	Ссылка 1 Ссылка 2 Ссылка 3 Вёрстка блока навигации. Создаю ячейку, занимающую 20% ширины таблицы. Внутри тегов расположен список ссылок. На его основе можно сделать меню сайта.
Низ сайта (баннеры, счетчики, информация)

).

Метод получил широкое распространение во времена предшествовавшие появлению стандарта CSS , так как на тот момент не было другой простой возможности точно расположить элементы на странице. Таблицы же, за счет того, что автоматически изменяют свой размер в соответствии с содержимым, а также за счет возможности, напротив, задать точные размеры той или иной ячейки, позволяют быстро и удобно расставить иллюстрации к тексту или совместить несколько частей коллажа в одно большое изображение. Кроме того, таблицы в HTML могут быть вложенными, что позволяет создавать целые иерархии таблиц, что было очень удобно при верстке сложных страниц, отдельные элементы которых должны были бы сохранять свое положение и размер на экране вне зависимости от размера окна браузера , тогда как другие элементы, напротив, должны были изменяться в размерах и/или изменять свое местоположение относительно остальных объектов документа.

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

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

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

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

Примечания

Wikimedia Foundation . 2010 .

• Idesk

Смотреть что такое "Табличная вёрстка" в других словарях:

Вёрстка веб-страниц - Вёрстка веб страниц процесс формирования веб страниц в текстовом либо WYSIWYG редакторе, а также результат этого процесса, то есть собственно веб страницы. По принципам использования средств разметки HTML различают логическую разметку и… … Википедия

Резиновый тип макета - (англ. adaptable fluid). Тип макета переменных ширины, относительного положения элементов и постоянных размеров, пропорций размеров элементов страницы относительно разрешения монитора. Как правило, для макета используется табличная вёрстка,… … Википедия

Фиксированный тип макета - (англ. rigid fixed) тип макета постоянных размеров и пропорций элементов страницы относительно разрешения монитора. Как правило для макета используется табличная вёрстка, но может так же применяться как чисто div, так смешанное применение… … Википедия

Верстка веб-страниц - Вёрстка веб страниц процесс формирования веб страниц в текстовом либо Вёрсткой веб страниц занимаются верстальщики веб страниц. Содержание 1 Основные идеологии вёрстки веб страниц 1.1 Вёрстка с помощью слоёв … Википедия

Что же такое табличная верстка веб-страниц? Это метод верстки, при котором в качестве основы структуры расположения различных графических и текстовых элементов используют тег

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

Тем не менее, использовать только табличный метод — это не всегда правильное решение. Так как каждый объект HTML имеет свои, собственные цели. Поэтому, если повсеместно использовать этот элемент не по назначению - результат может быть далек от желаемого.
Интенсивное развитие XМL и ХНTML, которые скрупульозно относятся к написанию кода, требуют твёрдо придерживаться общих стандартов HТML и СSS. А это значит, что в первую очередь, стоит использовать таблицы конкретно для хранения табличных данных. Так как именно для этих цели они и были созданы. А для самой верстки и непосредственно для оформления страниц - следует применять верстку div-блоками.

Применение табличной верстки может быть оправдано в таких случаях:

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

• Если высота всех колонок должна быть равной. В этом случае таблицы помогут установить одинаковую высоту для колонок, независимо от объема их содержимого. Этого эффекта можно добиться только в при условии, что для колонок применяется рамка, или заливка фона

• Если вас лимит времени и просто некогда делать верстку сложнее. Основные преимущества табличного метода верстки — быстрая и простая верстка, а главное это корректное отображение веб-страницы в разных браузерах (кроссбраузерность).

К основным преимуществам данного метода можно отнести:

• Таблицы не перекрывают друг друга при маленьком разрешении: Таблицы хорошо использовать как модульную, многоколонную сетку, где все ячейки являют собой отдельную колонку. Это дает возможность создавать 2-х и 3-х колоночные макеты документов. Если изменить размер окна браузера — колонки будут сохранять свой исходный вид. Также, они не будут переносится на соседние колонки, как слои. Дополнительно к этому, высота колонок останется равной, независимо от объема содержимого

• Таблицы хорошо подходят для создания макетов, размеры которых привязаны к размерам окна браузера. Это достигается тем, что размеры таблицы можно задавать в процентном соотношении. Тогда таблица способна занимать все отведенное для нее пространство.

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

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

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

К основным недостаткам данного метода можно отнести:

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

Существует и способ обхода этого свойства, по средствам, разбиения больших таблиц на меньшие таблицы, или использованием свойства table-layout.

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

• Плохая индексация в поисковиках - текст, что расположен в отдельных ячейках таблицы, может находиться далеко друг от друга в коде. Как следствие - поисковик воспринимает данные как таблицу, а не как отдельный документ. Это может стать произвести к тому, что сайт может не попасть в топ выдачи по ключевым словам, только по этой причине.
  Отсутствие разделения между содержимым и оформлением — HTML-код должен содержать исключительно теги стилевого класса и идентификатора. А оформление элементов, должно выносится в CSS. Такое разделение дает возможность легко и независимо править код, или менять ее отдельные элементы.

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

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

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

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

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

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

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

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

Сложность.

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

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

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

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

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

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

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

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

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

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