Спор между сторонниками табличной верстки и верстки блоками. Табличная верстка страниц и ее особенности

Документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть 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. Можно сделать фиксированную ширину страницы, установив размер таблицы в пикселях, а можно указать ширину в процентах и получить «резиновый» дизайн.

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

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

Сложность.

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

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

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

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

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

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

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

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

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

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

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

Этих недостатков лишён метод дизайна, основанный на методах позиционирования CSS , которые были рассмотрены в "Позиционирование средствами CSS" соответствующей лекции. Однако средства CSS -вёрстки несколько менее очевидны для понимания и требуют большей осторожности по отношению к специфике разных браузеров.

Табличная вёрстка

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

Заголовок страницы
Ссылка 1 Ссылка 2Ссылка 3Ссылка 4
Maecenas malesuada Integer molestie Vivamus aliquet Aliquam imperdiet Morbi pellentesque	Центральная колонка Любой макет страницы...... Большой недостаток...
Нижний колонтитул

Листинг 10.1. Макет страницы, построенный как таблица

Рис. 10.1.

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

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

CSS-вёрстка. Макет с одной колонкой

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

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

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

Есть CSS-свойства, которые предусмотрены для того, чтобы решить эту проблему: min-width , min-height , max-width и max-height .

Свойства min- указывают браузеру сделать элемент, по крайней мере, таким же широким или высоким, как указанное значение. Вы можете применить свойство min-width к элементу body , чтобы управлять всей шириной содержимого страницы. Если посетитель расширит окно своего браузера до 1000 пикселов, содержимое страницы растянется так, что будет соответствовать всему доступному пространству. Однако если он сделает окно шириной 500 пикселов, то содержимое останется 760 пикселов в ширину, а браузер добавит горизонтальные полосы прокрутки. Свойство min-height делает то же самое, но для высоты документа.

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

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

#frame { width: 70%; min-width: 400px; margin-left: auto; margin-right: auto; background-color: #ddd; padding: 5px; } ...

Заголовок страницы

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

Разметки с непостоянной шириной решают эти проблемы, но у них также есть свои собственные ограничения. На маленьком экране свободная разметка может настолько сжаться, что весь дизайн развалится, а при очень широком экране растянется так, что посетителям придётся читать ненормально длинные строки текста. Есть CSS-свойства, которые предусмотрены для того, чтобы решить эту проблему: min-width, min-height, max-width и max-height.

Листинг 10.2. Варианты вёрстки одноколоночного макета при помощи CSS

Рис. 10.2.

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

Табличная верстка - это условное названия метода верстки страниц сайта.

При табличном методе верстки каркас страниц сайта создается при помощи тега

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

Это наиболее распространенный способ верстки веб-страниц. Преимущество табличной верстки в том, что она проста и быстра в исполнении. Кроме этого, страницы, имеющие в своей основе таблицу, корректно отображаются в различных браузерах.

Я думаю, что Вы уже знакомы с основными тегами таблиц: это теги

и не может существовать сам по себе. Обязательно наличие тега

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

Как сделать табличную верстку сайта?

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

Строки и ячейки таблицы. Самое важное правило – информация в таблицах выводится только в ее ячейках. Они, в свою очередь, располагаются в строках. Таким образом, в теге table сначала пишут парный тег tr (table row), а потом td (то есть ячейка).

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

, создающие строку и ячейку таблицы соответственно. А также Вы, наверняка, знаете основы работы с таблицами в HTML . Если нет, то советую сначала немного почитать об этом . А сейчас давайте перейдем непосредственно к созданию каркаса страницы методом табличной верстки. В основном верстка с созданием таблиц выполняется так, что границы и таблиц и их ячеек невидимы (атрибут border= "0" ). Я же буду создавать таблицы, имеющие границы (атрибут border= "1" ). Так Вам проще будет ориентироваться. Шаг 1. Основная таблица Стандартная первоначальная таблица, составляющая основу страницы, обычно состоит из трех строк: верхняя строка предназначена для шапки сайта - это может быть любое изображение, созданное Вами в редакторе Adobe Photoshop или позаимствованное из какого-либо источника; нижнюю строку занимает подвал или так называемый « футер» сайта (от англ. footer - нижняя сноска ); и основная строка расположена по середине. Далее Вы узнаете для чего она предназначена. Предлагаю назвать первоначальную таблицу основной . Делаем это для исключения путаницы, так как далее будут создаваться другие таблицы. Здесь стоит отметить следующий важный момент : тег
. То есть строка таблицы создается только при наличии в ней хотя бы одной ячейки. Фрагмент кода: > Основная таблица Шапка сайта Основная строка Подвал Результат: Что касается ширины основной таблицы, то, как Вы видите, мы ее установили фиксированной: равной 1000 px . Вы можете установить любую ширину, но делайте ее не более, чем разрешение экрана . Например, если у Вас установлено разрешение 1280х1024 , то желательно, чтобы ширина основной таблицы не превышала 1280 px , иначе какая-то ее часть не будет видна, а у окна браузера появиться горизонтальная полоса прокрутки. А что если у определенного числа пользователей разрешение экрана меньше Вашего, например 1024х768 ? В этом случае при ширине основной таблицы более 1024 px , какой-то части пользователей будет неудобно просматривать страницы Вашего сайта, так как им придется пользоваться горизонтальной полосой прокрутки. Выход из этого есть. Можно установить значение ширины равным 100% . Тогда ширина таблицы будет подстраиваться под размеры окна браузера. Также можно сразу задать значение атрибута height тега , устанавливающего высоту таблицы. Пусть высота основной таблицы составляет 700 px . Следует знать , что значения высоты и ширины таблицы не являются постоянными, то есть меньше таблица не станет, а вот больше может - всё зависит от размеров её содержимого. Шаг 2. Таблица для контента Создаем в ячейке основной строки еще таблицу. Назовем ее таблица для контента - в ней будет размещено основное содержимое страницы. Как правило, таблица для контента состоит из трех столбцов, то есть имеет одну строку и три ячейки, образующие столбцы. И, как правило, в левой колонке размещают меню навигации, а в правой, например, рекламные блоки, баннеры и т.п. Можно правую колонку временно оставить пустой или не создавать ее (но лучше создайте - по мере наполнения сайта ей найдется применение ). И, наконец, центральная ячейка таблицы для контента является основной , так как в ней размещают контент: тексты статей, различные графические элементы и т.д. Фрагмент кода: "700" > Основная таблица Шапка сайта Конец основной строки Подвал Начало основной строки Устанавливаем ширину и высоту таблицы для контента равными 100% Левая ячейка таблицы для контента Центральная ячейка таблицы для контента Правая ячейка таблицы для контента Результат: Ширину и высоту таблицы для контента устанавливаем равными 100% . Таким образом она сразу растянется на всю ширину основной таблицы и на всю высоту основной строки. Шаг 3. Вертикальное выравнивание Как видно из предыдущих шагов, содержимое ячеек таблицы по умолчанию выравнивается в горизонтальной плоскости по левому краю, а в вертикальной - по середине. Если горизонтальное выравнивание в ячейке, как правило, оставляют по умолчанию, то расположение контента по центру ячейки в вертикальной плоскости редко кого-то устраивает. Поэтому, при помощи атрибута valign тега	, устанавливаем вертикальное выравнивание содержимого тех ячеек, для которых это необходимо. В основном для содержимого ячеек устанавливают вертикальное выравнивание по верхнему краю. Фрагмент кода: "700" > Основная таблица Шапка сайта. Конец основной строки Подвал Начало основной строки Таблицы для контента Левая ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю. Центральная ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю. Правая ячейка таблицы для контента Результат: Шаг 4. Заполняем таблицу: шапка, подвал и контент Итак, на предыдущем шаге мы закончили формировать наш каркас (впрочем его можно переделать и внести какие-то изменения в любое время ). Сейчас давайте перейдем к заполнению основной таблицы. Начнем с шапки. Я взял изображение, являющееся шапкой моего сайта и уменьшил его до соответствующего размера: напомню, что ширина основной таблицы, а соответственно, и ячейки под шапку составляет 1000 px . Зная высоту изображения, устанавливаем для ячейки, отведенной под шапку, соответствующее значение высоты: 121 px . Переходим к подвалу: нижнюю ячейку основной таблицы, являющуюся «футером» страницы, зальем синим цветом (атрибут bgcolor тега	задает фоновый цвет ячейки ) и сделаем ее по высоте, равной 35 px . Далее редактируем таблицу для контента: установим ширину левой ячейки равной 250 px , а правой ячейки - 150 px . Центральная ячейка занимает все свободное пространство: ее ширина становится равной 600 px . Фрагмент кода: "700" > Основная таблица Шапка сайта. Конец основной строки Подвал. Светло-синий фон "121" > Начало основной строки Таблицы для контента Левая ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю. Центральная ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю. Правая ячейка таблицы для контента "#6699FF" > Результат: В левой ячейке таблицы для контента я разместил меню навигации по сайту, а в центре - текст. Шаг 5. Оформляем границы Это последний шаг, в котором мы оформим границы. Я поступил следующим образом: для границы шапки сайта и центральной ячейки основной таблицы я выбрал тот же цвет, которым залит «футер», а ячейки таблицы для контента имеют темно-синие границы. Все границы выполнены непрерывной линией и имеют толщину 1 px . Фрагмент кода: "700" > Основная таблица Шапка сайта. Светло-синяя граница Конец основной строки Подвал. Светло-синий фон "121" style=" border: #6699FF solid 1px "> Начало основной строки Таблицы для контента. Светло-синяя граница Левая ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю. Темно-синяя граница Центральная ячейка таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю. Темно-синяя граница Правая ячейка таблицы для контента. Темно-синяя граница Результат: На этом, пожалуй, закончим создание каркаса страницы методом табличной верстки. Немного позже я продолжу развивать эту тему: немного усложним наш каркас, включив в него еще одну строку для верхнего меню навигации; можно разместить, например, в левой колонке еще одну таблицу, таким образом разбив ее на части и т.п. Впрочем, Вы можете сделать это самостоятельно. Заодно закрепите пройденный материал!

< table > < tr > < td > < / td > < td > < / td > < td > < / td > < / tr > < / table >

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

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

< table > < tr > < td > < / td > < td > < / td > < td > < / td > < / tr > < tr > < td > < / td > < td > < / td > < td > < / td > < td > < / td > < / tr > < / table >

Рис. 2. Две таблицы, только что созданные с помощью html.

В этом случае у нас будет две строки. В первой будет три ячейки, а во второй – четыре. Соответственно, строки следуют друг за другом по вертикали, а ячейки – как уже и говорилось, по горизонтали. Еще мы задали фиксированные размеры ячейкам. Можно также установить цвет, выравнивание, отступы и много чего другого. Например, в css-файл я записал такой код:

table{ border-spacing: 0; margin-bottom: 50px; } td{ border: 2px solid green; width: 100px; height: 50px; background: yellow; text-align: center }

table { border - spacing : 0 ; margin - bottom : 50px ; td { border : 2px solid green ; width : 100px ; height : 50px ; background : yellow ; text - align : center

Результат:

Рис. 3. Всего лишь пару строк в css и таблица уже неплохо оформлена.

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

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

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

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

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

Создание декоративных эффектов. Каждой ячейке можно задать отдельный фоновый рисунок и размеры. Таким способом раньше создавали массу декоративных эффектов: нестандартные рамки, уголки, тени.

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

Кроссбраузерность. Теги для табличных данных появились очень давно и поддерживаются даже в старейших версиях Internet Explorer. Сайт на таблицах одинаково выглядит в разных браузерах.

Минусы

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

Ухудшение скорости зарузки. Таблица имеет одну очень нехорошую особенность – она не будет отображена до тех пор, пока все ее ячейки, включая самые нижние, не будут загружены. И тут представьте себе ситуацию, что вы вывели на странице 20 изображений в таблице. Как вы думаете, быстро ли они загрузятся?

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

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

Неудобное управление через стили. Опять же, из-за обилия вложенных тегов таблицу сложно стилизовать через стили. Вам придется дописать множество атрибутов в html, что еще больше увеличит код.

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

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

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

Таблицы живы

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

Ну а чтобы быть в курсе этих самых веб-стандартов, необходимо иметь под рукой хороший источник информации. Подписывайтесь на webformyself и изучайте сайтостроение.