Преимущества и недостатки таблиц

Текстовая версия   Добавить комментарий

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

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

Преимущества таблиц

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

Создание колонок

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

«Резиновый» макет

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

«Склейка» изображений

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

Фоновые рисунки

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

Выравнивание элементов

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

Особенности браузеров

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

Недостатки таблиц

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

Долгая загрузка

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

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

Громоздкий код

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

Плохая индексация поисковиками

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

Нет разделения содержимого и оформления

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

Несоответствие стандартам

В последнее время стандарты HTML и CSS прочно засели в умах веб-разработчиков. Этому способствует развитие XHTML и XML, которые более «жестко» относятся к коду документа, появление новых версий браузеров, придерживающихся спецификации, и мода на верстку слоями.

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

Применение таблиц для верстки

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

Высота колонок должна быть одинаковой

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

Макет должен занимать всю высоту окна браузера, независимо от объема информации

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

Нет времени на сложную верстку

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

Если подходить критично к способам использования таблиц, то действительной причиной их популярности является консерватизм разработчиков, привычность и быстрота верстки сайтов с их помощью. Ясно одно — таблицы постепенно сдают свои позиции в пользу верстки слоями. Но пройдет еще несколько лет, прежде чем «табличные» сайты станут раритетом и исчезнут с простора Рунета.

Комментарии к статье

sergey

07.02.2007

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

В?рстка на дивах просто веяние моды.

Для увеличения скорости загрузки таблицы существует тег <col />

Влад Мержевич

07.02.2007

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

Maxim

12.03.2007

Таблицы и индексация практически никак не связаны. Говорить о плохой индексации табличной верстки вообще нельзя - это просто дезинформация. Единственная особенность таблмчной верстки - текст в поисковую базу попадает именно по ходу нахождения в ячейках, что не всегда хорошо. Плюс верстки слоями как раз в этом, можно подсунуть в начало тот текст который нужно, хотя визуально он может быть вообще в самом низу.
Лично мне по старинке нравится табличная верстка. Да она в чем-то громоздка, но вопрос объема отпадает с каждым днем с развитием высокоскоростного доступа. А вопрос легкости управления для меня вообще кажется странным, откуда он. Каждая маломальски серьезная компания ставит сайт на систему управления где используется система шаблонов. Если возникает необходимость что-то изменить, меняется шаблон и все, 10 или 20 минут - тут разницы нет. Это не на заре веба, когда мы все руками делали и сотни страниц лежали отдельными файлами по папочкам.

P.S. наткнулся на сайт случайно. Заинтересовал, обязательно почитаю.

Игорь

20.03.2007

Хорошая тема. Кстати табличная верстка только тормозило загрузку страниц на 33.6 с сетями от 512 Kb/s этой проблемы нет, так что верстаем чем хотим. Хотя как по мне верстку на дивах легче понять чем допустим таблицы 3-х уровней вложенности

Тимофей

12.04.2007

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

AFenics

07.06.2007

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

alexey

25.08.2007

Надо сказать, что вопрос по поводу скорости загрузки страниц не очень и старый. Я лично живу в далеком городе, где за каждый мегабайт мы платим не так и дешево, а безлимит выше 8КБ в секунду - роскошь. Поэтому я считаю страницу больше 100КБ - преступлением. А количество подключений в далеких регионах растет.
Плюс к этому надо добавить, что увеличивается количество пользователей, которые заходят в и интернет с мобильных телефонов или GPRS модемов. Там тарифы и скорость - просто жуть.
В пользу верстки слоями я могу добавить то, что с помощью простой смены CSS можно сделать полноценную PDA версию сайта и версию для печати.

Slon

04.09.2007

Таблица вошла в нашу жизнь давно, находится в ней сейчас, и еще не нашлось ей замены. Кроме верстки, таблицы используются всюду. Люди некоторых профессий мыслят таблицами. А тут на тебе. <В определенных случаях верстка таблицами является ошибкой>. Когда и кто решил, что это ошибка?

Влад Мержевич

05.09.2007

Где это вы нашли подобную фразу?

Ivan

05.09.2007

главный минус дива у него нет выравнивания по вертикали......

Влад Мержевич

06.09.2007

Это не минус дива, а особенность слоев, что их высота строится с учетом содержимого.

LuLok

18.09.2007

Почитал в интернете статьи на эту тему. Особенно мне понравились примеры сайтов, где замена только одного CSS меняла полностью (!) дизайн сайта. Т.к. я только начинаю заниматься разработкой сайтов и мне сейчас одинаково непонятно и тот и другой вид верстки, то я буду затачиваться под верстку слоями.

Guvatara

05.10.2007

Огромный плюс таблиц это возможность контролировать то что будет отображаться на экране. Тут кто то говорил что если шаблон сверстан с учетом всех правил и рекомендаций W3c то он будет везде отображаться одинаково. Это полная чушь. Ослик 7 с этими стандартами не дружит и в некоторых случаях спасает лишь написание программы чтоб его научить понимать эти стандарты. Ослик 6 куда более ученый, так как его уже научились приручать.
Кстати кто сказал, что слои вообще подходят на замену таблицам? Это же абсолютно разные вещи считаю что гибридная верстка - это наиболее умный подход, пока ослика 7 не профиксят хотябы до уровня ослика 6.

Viktor

14.10.2007

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

Vio

20.06.2008

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

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

Дмитрий

31.07.2008

http://maxi-studio.ru/

Добавить комментарий

Имя

Комментарий

Сохранить имя (используется cookie)

Copyright 2002–2008 Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru

О сайте | Планы на будущее | Использование сайта | Борьба с ошибками | Технологии | Поддержать проект