Css табличная верстка. CSS-вёрстка. Макет с одной колонкой
или примеры верстки сайта с помощью таблиц
Способ табличной верстки сайта
не является рекомендуемым или семантически правильным, в отличие от того, что был показан в предыдущем уроке, где верстка осуществлялась
обычными контейнерами
со стилевыми описаниями. В современном
XHTML
таблицы рекомендуется использовать только для представления данных, но никак не для верстки сайта
. Невзирая на это, мы все же рассмотрим такой способ как дополнение к урокам, где мы занимались построением таблиц.
Примеры верстки страниц сайтов при помощи HTML таблицы
.
Отметим, что использована структура XHTML
документа, о чем свидетельствует и открывающий тег .
Параграф
Содержит CSS
атрибут class="" , значение которого - селектор описывается в секции .
Дальше вспоминаем уроки по таблицам...... Указываем ширину первой и третьей ячейки среднего ряда: width:120px + padding:15px = 150px (ширина одной ячейки) — умножаем на 2, получаем 300px. Ширина среднего столбца (ячейки) = (равна)
ширина таблицы (860px) - (минус) ширина левого и правого столбца (300px). Что касается высоты, то все ячейки одого ряда автоматически выравниваются по
самой высокой, поэтому в стилях, в описаниях среднего ряда была указана высота только одной — крайней левой. При расчете размеров всегда нужно учитывать значения
padding, margin, border . Значения этих атрибутов задаются так: padding:20px - внутреннее поле элемента по всему своему периметру
равно 20-ти пикселям или так: padding:10px 0 8px 60px - верхнее внутреннее поле равно 10-ти пикселям, правое - нулю, нижнее -
8-ми пикселям и левое - 60-ти пикселям (по часовой стрелке, начиная сверху). Жесткость такой верстки заключается в том, что размеры таблицы
заданы в пикселях, а не в процентах, то есть они не зависят от размера монитора или окна браузера.
Резиновая табличная HTML верстка
Пример резиновой HTML табличной верстки сайта
:
Резиновая HTML табличная верстка сайта
Мой сайт
Меню
Ширина ячейки в данном случае зависит от величины монитора или размера окна браузера.
Ссылки
Все права защищены
Сравните этот код и код из предыдущего примера, и вы увидите, что было изменено значение лишь одного атрибута в теге
. При
горизонтальный размер таблицы напрямую зависит от разрешения монитора. В нашем случае ширина первого и третьего столбцов (ячеек) среднего ряда
установлена жестко, а второй столбец растягивается, обеспечивая 100% ширину таблице. Недостатком такого типа верстки сайта является
непостоянная структура содержимого «резиновых» ячеек, которая изменяется в зависимости от размера окна браузера — при этом изменяется и внешний
вид страницы.
П
одробно взаимодействие основных инструментов сайтостроения: HTML
и CSS
, а также все способы верстки рассматриваются в следующем разделе
самоучителя, в уроке
При таком типе вёрстки элементы сайта располагаются по ячейкам. Создаётся файл-шаблон с разметкой и используется как основа для всех остальных страниц. Фактически от файла к файлу меняется только основной контент. Шапка сайта, его низ и меню берутся из уже готового шаблона и обычно остаются неизменными.
Табличная вёрстка проста и во всех браузерах выглядит одинаково. Но состоящие из таблиц страницы много весят, медленно загружаются и содержат избыточный код. К тому же структура таблиц позволяет создать только строгий дизайн.
Вёрстка этого типа делается просто: в теле документа создаётся таблица (и ничего, кроме неё), в ячейки которой добавляется весь контент. Вёрстка потому и называется табличной, что вся страница состоит из таблиц, а вся выводимая информация находится внутри их ячеек. Даже область с основным содержимым страницы (например, со статьёй) - это всего лишь ячейка, текст из которой отображается на экране.
HTML-документ не обязательно должен состоять из одной таблицы - их можно вкладывать друг в друга, получая более интересное оформление.
Теги для создания таблиц были рассмотрены в соответствующей статье. Ниже приведён пример их использования.
Итак, пример табличной вёрстки:
Табличная вёрстка
навигация
заголовок
Ссылка 1
Ссылка 2
Ссылка 3
контент
Если поместить этот код в тело HTML-документа и открыть получившийся файл в браузере, то страница будет выглядеть так:
Вот и вся разметка. Для создания страниц вам остаётся только сделать копию файла и вместо отображаемых слов вставить свой контент. Так, копируя файлы и редактируя содержащийся в ячейках текст, вы можете создать сколь угодно большой веб-сайт с табличной вёрсткой.
Но взглянем на код с пояснениями.
Тег
открывает таблицу.
Атрибут border
задаёт толщину табличных рамок.
Cellspacing
устанавливает расстояние между ячейками. В данном случае оно сделано нулевым, чтобы таблица не расползалась.
шапка сайта (логотип, слоган, телефон)
- открывающий тег ячейки заголовка таблицы. В отличие от других, текст в этой ячейке будет выровнен по центру и выделен полужирным.
Colspan
- атрибут, значение которого определяет, сколько ячеек по горизонтали относительно других строк текущий элемент будет занимать.
закрывает ячейку.
Текст между тегами
и
- это и есть содержимое ячейки, ради него всё и делалось.
- конец строки.
навигация
заголовок
Я разделил 100% ширины страницы на две части: 20% отдал под блок навигации, 80% - под основной контент.
Ссылка 1
Ссылка 2
Ссылка 3
Вёрстка блока навигации. Создаю ячейку, занимающую 20% ширины таблицы. Внутри тегов расположен список ссылок. На его основе можно сделать меню сайта.
Низ сайта (баннеры, счетчики, информация)
В следующей строке настраиваю подвал (низ) сайта. Для этого использую уже знакомые теги. При помощи colspan=2
делаю, чтобы низ сайта занимал по горизонтали сразу две ячейки, как шапка - эти части, в отличие от тела страницы, на блоки в моём случае делить не нужно.
Таким образом, для создания табличной вёрстки сайта, содержащего все основные элементы (шапку, низ, меню, контент страницы) понадобилась таблица, состоящая из четырёх строк и шести ячеек (строки головы и ног сайта содержат по одному элементу).
На современных сайтах практикуется блочная верстка , а таблицы уже вчерашний день.
Табличная верстка
- это условное названия метода верстки страниц сайта.
При табличном методе верстки каркас страниц сайта создается при помощи тега
, то есть структурной основой страницы является таблица, в ячейках которой располагают тот или иной контент.
Это наиболее распространенный способ верстки веб-страниц. Преимущество табличной верстки в том, что она проста и быстра в исполнении. Кроме этого, страницы, имеющие в своей основе таблицу, корректно отображаются в различных браузерах.
Я думаю, что Вы уже знакомы с основными тегами таблиц: это теги
и
, создающие строку и ячейку таблицы соответственно. А также Вы, наверняка, знаете основы работы с таблицами в 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
">
Шапка сайта. Светло-синяя граница
Начало основной строки
Таблицы для контента.
Светло-синяя граница
Левая ячейка
таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
Темно-синяя граница
Центральная ячейка
таблицы для контента. Содержимое ячейки выравнено по ее верхнему краю.
Темно-синяя граница
Правая ячейка
таблицы для контента. Темно-синяя граница
Конец основной строки
Подвал. Светло-синий фон
Результат:
На этом, пожалуй, закончим создание каркаса страницы методом табличной верстки.
Немного позже я продолжу развивать эту тему: немного усложним наш каркас, включив в него еще одну строку для верхнего меню навигации; можно разместить, например, в левой колонке еще одну таблицу, таким образом разбив ее на части и т.п.
Впрочем, Вы можете сделать это самостоятельно. Заодно закрепите пройденный материал!
Приветствую дорогие читатели, в этом выпуске речь пойдет о разновидностях верстки. Все вы, наверное, слышали о блочной верстке и табличной
, сегодня я бы хотел поговорить об этих двух разных подходах к верстке сайта. В предыдущей статье я описывал, как защитить электронный , немного раньше мы рассматривали конкретный пример магазина на современном компоненте virtuemart для бесплатной CMS joomla.
Эта статья будет полезна начинающим вебразработчикам, которые только становятся на тернистый путь "сайтостроителей" и хотят самостоятельно делать сайты
. Вебразработчики со стажем тоже смогут что-то почерпнуть для себя, в частности в статье сравниваются достоинства и недостатки табличной и блочной верстки
.
Пожалуй, нужно начать с того, что такое верстка сайта? Верстальщик получает от дизайнера макет будущего сайта, как правило, макеты предоставляются в формате photoshop. Макет это по сути рисунок, только более детализированный, в нем отдельные элементы (меню, шапка сайты...) разнесены по слоям, это получается естественным путем когда дизайнер рисует макет, кроме того это очень удобно, можно легко скопировать рисунок с нужно слоя, посмотреть параметры шрифта и т.д. Так вот суть верстки в трансформации макета в html документ и составления набора CSS правил.
Следует отметить, что верстка это процесс творческий, не такой конечно как отрисовка макета в фотошоп но, тем не менее, доля творчества в этом есть особенно на начальном этапе, далее с ростом опыта процесс верстки можно механизировать. Качество верстки оценивается по тому, насколько сверстанный сайт отличается от макета.
Виды верстки
Как заявлено в названии верстка бывает блочная или табличная
. В блочной верстке элементы сайта структурируются с помощью блоков (div
), в табличной верстке обходятся таблицами (table
).
Табличная верстка
Табличная верстка
использовалась на заре сайтостроения, она была популярна среди начинающих вебразработчиков. Следует заметить, что многие вебмастера и сейчас достаточно эффективно обходятся версткой таблицами, как говориться - дело мастера боится. Лично я предпочитаю блочную верстку табличной верстке, но мы сейчас не о вкусах. В основу идеи положено представление сайта в виде таблицы. Как известно подавляющее большинство сайтов имеют типовую структуру, которую можно детализировать под конкретную задачу. Рассмотрим для примера типовой вариант сайта
который содержит шапку, область контента, правый сайдбар и футер, такова не хитрая структура моего блога. Реализуем данную структуру таблицей
шапка
контент
сайдбар
футер
таблице следует задавать конкретную фиксированную ширину, если макет имеет фиксированную ширину или 100%, если макет резиновый, в этом случае таблица будет растягиваться по ширине экрана в зависимости от разрешения монитора.
Достоинства и недостатки табличной верстки:
Проста в понимании, не требует более глубоких знаний HTML и CSS (+
)
Интуитивно понятна при построении, минимум CSS правил (+
)
Трудно разбираться в HTML коде при более сложной структуре сайта (-
)
Пока вся таблица не загрузиться она не будет показана на экране (-
)
Сложный дизайн с перекрытием элементов не реализуем (-
)
Много лишнего кода (-
)
Остановимся поподробнее на 4-ом пункте. Дело в том, что HTML таблицы устроены таким образом, что браузер не может знать заранее как рисовать таблицу с ее содержимым, пока оно незагружено, до тех пор, пока последний рисунок, находящийся в таблице не будет загружен, таблица не будет показана на экране браузера, что может стать причиной ухода пользователей с сайта не дождавшись отображения страницы, поскольку посетитель не видит ничего на экране некоторое время. Создается впечатление будто сайт тормозит, на самом деле браузер ждет пока все элементы таблицы будут загружены.
блочная верстка
Блочная верстка базируется на том, что блочные элементы HTML, как правило, располагаются по вертикали, сверху вниз друг за другом в том порядке, в котором они встречаются в HTML коде. Кроме этого блокам можно задавать свойство плавучести (float:left | right | none | inherit
). Если блоку указать свойство float:left
, то он будет выровнен по левому краю, а все остальные блоки будут игнорировать его, как будто этого блока нет, за исключение текста, остальные блоки, которым задано это же свойство будут обтекать его справа, на сколько это позволяет ширина экрана или элемента внутри которого они находятся. Следует заметить, что любой элемент можно сделать блочным, заданием ему свойства display:block
, изначально только элементы div
по умолчанию считаются блочными элементами, для не блочных элементов (span, p
) свойство float
игнорируется и такие элементы располагаются как обычно последовательно сверху вниз. Чтобы свойство float
не игнорировалось необходимо задать элементы свойство display:block
.
float:right
выровнит блок по правому краю, а все остальные блоки будут игнорировать его, либо обтекать, если им задано это же свойство и если в коде идут подряд два или несколько блоков с указанным свойством, то первым вправо встанет тот блок, который идет первым в коде, остальные обтекают его слева.
Свойство float:none
отменяет эффект плавучести для блока, но это не значит что блок будет располагаться как обычно сверху вниз, если выше расположен блок с эффектом плавучести, то нижний блок будет игнорировать верхний и встанет под него, чтобы этого не было нужно задать этому блоку свойство clear:both
. Ух, сложно да? Это только, кажется, на первый взгляд, на самом деле все логично и просто, надо только потренироваться.
float:inherit
- задает свойство плавучести, такое же, как у родительского блока (блока в который вложен данный дочерний блок).
Нужны конкретные примеры, чувствую не убедительно, получается. Давайте создадим простой пример, для начала основу, красный блок с шириной 400 пикс. высотой 350 пикс. и выровним его посередине экрана.
теперь нужно добавить в этот блок еще пару блоков, зеленый и серый с высотой и шириной 100 пикс, у серого блока высота 120 пикс.
Видно, что блоки располагаются в общем потоке снизу вверх, в том порядке, в котором они встречаются в коде, сначала зеленый затем серый в конце голубой. Давайте зеленому блоку зададим свойство float:left
, чтобы серый и голубой блоки игнорировали его.
как видно серый блок проигнорировал зеленый блок и встал под него, зеленый блок, как бы сам по себе, голубой блок выстроился за серым. Зададим обтекание всем блокам.
Видно, что блоки выстроились один за другим в том порядке, в котором они идут в коде. Давайте попробуем расположить два блока друг за другом, а третий как обычно ниже. Для этого нужно убрать у третьего блока свойство float:left
, но этого недостаточно, так как он залезет под первые два блока, в чем мы убедились раньше. Чтобы этого не произошло нужно задать третьему блоку свойство clear:both
;
header
контент
сайдбар
foter
Вот такая структура получилась, при задании ширины блокам учитывался тот факт, что рамка 1 пикс. увеличивает размеры блока, поэтому размер хедера задан 398 пикс. а не 400 пикс.
Достоинства и недостатки блочной верстки:
Меньший вес страницы за счет меньшего кода (+
)
Реализация сложного дизайна с перекрывающимися блоками (+
)
Трудно освоить, табличная верстка проще (-
)
Чаще приходится решать вопросы кроссбраузерности. блоки могут перекрываться при изменении разрешения экрана, масштабировании (-
)
Лично я начинал с табличной верстки сейчас пользуюсь блочной, освоил ее достаточно давно, это было легко, хотя она и имеет ряд недостатков мне привычнее и проще пользоваться именно блочной версткой.
На этом все дорогие читатели, заходите по-чаще.
От автора:
хотя верстка с помощью таблиц уже отходит в прошлое, любой уважающий себя веб-разработчик обязан знать о ее преимуществах и недостатках. С десяток лет назад табличная верстка сайта была самым популярным способом сверстать сайт. По-прежнему в сети есть много сайтов на таблицах, некоторые и сегодня выбирают этот способ, но это уже исключения из правил.
Как сделать табличную верстку сайта?
Суть этого метода верстки в том, что весь сайт представляет собой одну большую таблицу. То есть все содержимое должно быть заключено в один парный тег — table. Возможно вы знаете, что в одну таблицу можно вложить неограниченное число других элементов, в том числе и других таблиц.
Строки и ячейки таблицы. Самое важное правило – информация в таблицах выводится только в ее ячейках. Они, в свою очередь, располагаются в строках. Таким образом, в теге table сначала пишут парный тег tr (table row), а потом td (то есть ячейка).
Ячеек в одной строке может быть неграниченное количество. Чтобы вы лучше поняли принцип размещения содержимого в таблице, я приведу несколько примеров кода:
<
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-файл я записал такой код:
Рис. 3. Всего лишь пару строк в css и таблица уже неплохо оформлена.
Как видите, все предельно просто. В ячейку вы можете вставлять сколько угодно других тегов. Туда можно вставить абзацы, изображения, видео и даже другую таблицу.
Конечно же, по умолчанию все эти теги сделаны именно для вывода табличных данных. В результате каждая ячейка имеет свою собственную рамку. Чтобы убрать это поведение по умолчанию, нужно всего лишь прописать несколько свойств в css.
Как видите, сделать табличную верстку сайта не так уж и сложно. По сути, нужно знать всего лишь три тега и понимать, как правильно в них разместить содержимое. Из-за этого создание сайта таблицами и было таким популярным – чтобы сделать даже многоколоночный шаблон не требовалось много усилий.
Плюсы табличной верстки
Резиновый макет. Табличный способ верстки позволяет легко сделать резиновый макет, задав ширину в процентах. С помощью различных настроек можно регулировать высоту ячеек внутри.
Создание декоративных эффектов. Каждой ячейке можно задать отдельный фоновый рисунок и размеры. Таким способом раньше создавали массу декоративных эффектов: нестандартные рамки, уголки, тени.
Вертикальное выравнивание. Внутри таблиц поддерживается выравнивание, как по горизонтали, так и по вертикали. В этом плане они выигрывают у блоков, хотя сегодня появился флексбокс, в котором тоже есть возможность отцентрировать по вертикали.
Огромный код. Для вывода таблицы требуется множество тегов. В реальных примерах табличной верстке часто встречаются еще и вложенные таблицы. В-общем, даже на разметку достаточно простой страницы может понадобиться 200+ строчек кода. Мало того, редактировать такую разметку также не очень просто.
Ухудшение скорости зарузки. Таблица имеет одну очень нехорошую особенность – она не будет отображена до тех пор, пока все ее ячейки, включая самые нижние, не будут загружены. И тут представьте себе ситуацию, что вы вывели на странице 20 изображений в таблице. Как вы думаете, быстро ли они загрузятся?
Если у вас скоростной интернет, то большой разницы вы может быть и не увидите, но пользователи с медленным соединением, коих до сих пор остается очень много, будут ждать значительно дольше. Впрочем, есть способы обойти это.
Плохая индексация. А вот это еще более значительный минус. Из-за большой разметки и обилия вложенных тегов текст на странице хуже воспринимается поисковыми системами и даже отлично оптимизированная и интересная статья может не попасть в топ.
Неудобное управление через стили. Опять же, из-за обилия вложенных тегов таблицу сложно стилизовать через стили. Вам придется дописать множество атрибутов в html, что еще больше увеличит код.
Несоответствие стандартам разработки. Как уже и говорилось, табличный способ верстки был придуман веб-разработчиками, но на самом деле эти теги изначально предназначались только для вывода табличных данных и больше ни для чего другого. Все остальные варианты использования табличных тегов не являются правильными с точки зрения стандартов.
Два основных правила табличной верстки
Макет должен заполнять по высоте все окно. Это первое правило. Если информации на странице мало, то футер должен быть прижат к нижнему краю окна браузера. Второе правило – все колонки на сайте должны быть одинаковой высоты. Конечно, это только в том случае, если к ним применяется какой-то фон. Тогда все ячейки в строке желательно делать равными по высоте, чтобы макет смотрелся ровно.
Таблицы живы
Табличная верстка сайта в html все еще жива. Она нужна как минимум для вывода табличных данных, но кое где до сих пор есть сайты, сверстанные этим способом. И хотя сегодня табличные теги применяются все меньше и меньше, едва ли они когда-то полностью выйдут из веб-стандартов.
Ну а чтобы быть в курсе этих самых веб-стандартов, необходимо иметь под рукой хороший источник информации. Подписывайтесь на webformyself и изучайте сайтостроение.
