Внимание! Данная запись отмечена как устаревшая и/или потерявшая актуальность! Возможно автор уже передумал и теперь придерживается другой точки зрения, нежели изложенная в тексте ниже.

Таблица или блок?

Дневник / Вёрстка сайтов: CSS, HTML, LESSПросмотров: 13645 (101)

Откуда-то повелось, что следование стандарту HTML или XHTML это отказ от использования тегов таблиц («table») в пользу блоков («div»). Для тех, кто все еще так считает, скажу, что теги таблиц не просто сохраняют свое присутствие в XHTML, но даже усиливают (если можно так сказать) свои позиции, прежде всего за счет введения дополнительных атрибутов в CSS2. Поэтому заявления, что верстка таблицами не соответствует спецификации HTML - полная ерунда. Давайте разбираться из-за чего весь сыр-бор возник.

Как известно, браузер отображает страницы по мере загрузки с сервера. Это вполне разумно, учитывая, что скорость может быть невысокой и пользователь сможет оценить важность информации, не дожидаясь ее полной загрузки. Если дело касалось бы только текста, который для нас всегда имеет такое же направление (линейное, с начала в конец, сверху вниз), то все было бы просто. Но иногда встречаются такая информация, которая должна быть расположена в колонках, как в газете. Самый распространенный пример - это две колонки: в одной текст, в другой навигация по сайту.

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

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

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

Блок DIV

В HTML используются два примитивных блока: «div» и «span» (в принципе, в HTML все теги - прямоугольники; мы же говорим об основополагающих). Когда браузер встречает тег «div», то он начинает его отображение с новой строки. Тег «span» новую строку не создает, поэтому говорят, что он блок текстового уровня.

Вебмастер может изменить отображение блока «div» с помощью дополнительных параметров, например указав его выравнивание. Замечательная возможность HTML заключается в том, что существует возможность сделать любой блок «плавающим». Это позволяет расположить два (и больше) блока рядом выравненными по верху. То есть визуально блоки выглядят как две колонки. При этом эти два блока не связанны между собой и в файле располагаются последовательно (линейно). Похоже, что именно такая верстка будет идеальной!

Но не тут-то было. Очень часто встречается такая верстка: создается общий блок, в него помещаются еще два - один для навигации, другой для текста. Блокам задается фиксированная ширина. Казалось бы проблем не должно быть, но это не так. В блок может быть помещен объект (текст, картинка), которые по ширине могут оказаться больше, чем сам блок. К чему это приведет? Правильно, браузер сделает ровно то, что ему и положено - он добавит перед блоком строчку. В итоге будет проигнорированно выравнивание и блоки оказутся размещенными «ступенькой». Знакомая ситуация. И не стоит винить в этом браузер - это ошибка вебмастера на все сто процентов.

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

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

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

В чем же преимущества такой верстки? Самое главное преимущество заключается в том, что браузер отображает содержимое этих блоков по мере поступления данных, поэтому никаких «подвисаний» не возникает. К другому достоинству относится и то, что такой блок имеет простую (примитивную) структуру: открывающий и закрывающий тег. Конечно же это не сравнить со сложными тегами, например «table».

Таблица

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

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

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

Из недостатков таблиц серьезно можно отнестить только к одному: пока не будет загружена вся структура, браузер ее не отобразит. Правда здесь стоит сделать замечание, о котором я упомянул выше. Для облегчения работы браузера вебмастер может использовать теги, указывающие браузеру параметры таблицы: «colgroup» и «col». Будем надеяться, что разработчики браузеров реализуют поддержку таблиц надлежащим образом. (Например в браузере Firefox таблицы отображаются вполне сносно.)

Пока же я могу дать советы, которые наверняка вы уже слышали:

  • Упрощайте таблицы - не нужно вкладывать одну таблицу в другую без особой необходимости, помните, что существуют такие атрибуты, как «rowspan» и «colspan».
  • Если есть возможность, то разбейте страницу на несколько таблиц - в этом случае они будут отображаться последовательно по мере загрузки.
  • Не нужно использовать таблицы для обычного блока, лучше вместо этого использовать «div».
Возможно в будущем мы и получим какое-то нормальное решение «проблемы таблиц», но пока вынуждены прибегать к различным ухищрениям - как часто визуальная структура странички не совпадает с его логической структурой!

Комментариев: 9 RSS

1gam06-03-2006 22:54

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

http://softwaremaniacs.org/blog/category/web/primer/

2DmitryCh30-06-2007 20:10

Привет!

Чувствуется, что Вы изрядно поковырялись с вёрсткой. Цель статьи не понятна, размыта так сказать. Вопрос в заголовке задан, а ответ однозначный не получен:shock:

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

Нет, не этот. Просто дивы проще за счёт разделения логики с использованием ЦЦС. Вот и всё. И когда были уже табл ещё небыли так развиты ЦЦС.

Полный отказ от табл. во что бы то ни стало - это дурь максимализма и моды. Приходиться мириться с

пока не будет загружена вся структура, браузер ее не отобразит
и ничего в этом страшного совершенно не вижу.

По советам:

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

3Friend03-08-2007 15:44

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

4Пётр27-12-2007 04:17

Пока CSS не доведут до ума и пока IE и Firefox не выберут себе другое поле битвы, комбинированый подход есть самый разумный... smile

5Грамотный план01-01-2008 19:45

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

6Peace21-04-2009 11:45

Надо браузерам дружилку дружить.

7Константин29-04-2013 16:57

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

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

8Сергей10-12-2014 15:37

Мучаюсь третий день,а выходит хрень...div блоки это гемарой!скачал курс по сайтосторению от А до Я так сказать...Дошёл до блоков div,а потом упёрся в стену...автор не объясняет как он создаёт их-он сделал их в Адоб имедж риди инструментом раскройки и он сохранил всё это в html код и всё.Я сделал всё тоже самое в Фотошопе,но в итоге html есть,а CSS файла то нету!Я много всего пробывал находя статьи на блогах,но всё не то-онлайн генератор создаёт сложный код который я пока не пойму...в других статьях выходит,что на большом разрешении правый блок меню убегает на другой конец экрана,а 1024х768 нормально.В фотошопе делаешь раскройку,а он в html сохраняет не div блоки,а таблицами!Нету не одного нормального урока на ютуб.Я не хочу переходить в курсе дальше пропуская уроки по div-ам.Я решил выучится на толкогого веб-мастера и перебраться с юкоза со временем и не создавать сайт по шаблону.

9MAX10-12-2014 16:02

Попробуйте начать отсюда http://maxsite.org/category/course-for-beginners

Оставьте комментарий!

Комментарий будет опубликован после проверки. Вы соглашаетесь с правилами сайта.

(обязательно)

О сайте

Здесь вы получите самую полную информацию о создании сайтов на MaxSite CMS.

Рейтинг@Mail.ru