div или table

[emgebor]

Как по Вашеу мнению, что эффективней, быстрее и к"кроссбраузерней" ) использовать div или table. Приветствуются именно аргументированные ответы, а не в стиле "Я использую table, потому что меня так научили..." и т.п.

[rash]

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

[Колос]

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

Все говорят, что так правильно, а почему так правильно, никто не говорит.

Edited November 7, 2008 by Колос

[Иван Шумов]

Все говорят, что так правильно, а почему так правильно, никто не говорит.

А никто и не будет отвечать на вопрос который должен отпадать если человек прочитал качественный мануал по html и css.

[Колос]

Иван Шумов

....Приветствуются именно аргументированные ответы, а не в стиле "Я использую table, потому что меня так научили..." и т.п.

[emgebor]

А никто и не будет отвечать на вопрос который должен отпадать если человек прочитал качественный мануал по html и css.

Хорошо, а ссылочки на качественные мануалы не скинете?

[rash]

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

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

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents

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

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

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

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

[Zuma]

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

[klierik]

в основе использую блочную верстку.

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

[Колос]

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

А что есть табличные данные и что нетабличные? Три колонки шаблона - это нетабличные данные? А три числа - табличные?

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

Не понятно, что в этом хорошего и правильного.

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

[rash]

А что есть табличные данные и что нетабличные? Три колонки шаблона - это нетабличные данные? А три числа - табличные?

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

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

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

[Колос]

1.Гора лишнего кода

На самом деле объём кода примерно одинаковый

2.Смесь отображения и содержимого

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

3.Сложность поддержки

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

табличной верстки тоже проще.

4.Неудобоваримость для поисковиков

Тут согласен

Я могу добавить от себя на какие грабли наступил с таблицами: Был сайт свёрстаный на таблицах. Одна большая таблица - в ней куча вложений. Где-то на 4-5 уровне вложенности таблица с большим объемом данных, которая долго грузилась. ИЕ6 же имеет свойство отображать таблицу, только когда она полностью загружена. В итоге пользователь секунд 10-15 видит пустой экран, а потом видит всё.

Не знаешь кстати, как это выглядела бы если бы было на слоях? Таблицы, например Мазила и Опера, тоже не очень красиво выводят. Если много строк, то пачками по 100-200 строк, потом тупление, потом ещё 100-200. Как выводятся слои? По одному? В каком порядке?

[rash]

1.Гора лишнего кода

На самом деле объём кода примерно одинаковый

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

2.Смесь отображения и содержимого

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

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

3.Сложность поддержки

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

табличной верстки тоже проще.

Насчет того, что таблицами проще - возможно, дело привычки. Иногда действительно удобно сделать одну таблицу-каркас, но увлекаться ИМХО не стоит.

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

4.Неудобоваримость для поисковиков

Тут согласен

Я могу добавить от себя на какие грабли наступил с таблицами: Был сайт свёрстаный на таблицах. Одна большая таблица - в ней куча вложений. Где-то на 4-5 уровне вложенности таблица с большим объемом данных, которая долго грузилась. ИЕ6 же имеет свойство отображать таблицу, только когда она полностью загружена. В итоге пользователь секунд 10-15 видит пустой экран, а потом видит всё.

Не знаешь кстати, как это выглядела бы если бы было на слоях? Таблицы, например Мазила и Опера, тоже не очень красиво выводят. Если много строк, то пачками по 100-200 строк, потом тупление, потом ещё 100-200. Как выводятся слои? По одному? В каком порядке?

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

P.S: как бы холивар не получился :-)

[Колос]

P.S: как бы холивар не получился :-)

Не понял.

[kalyaka-malyaka]

блочная верстка + таблицы для представления табличных элементов (это я о том, что пользую )

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

http://www.csszengarden.com/tr/russian/

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

есть, конечно, у дивов и свои недостатки вроде невозможности воспользоваться vertical-align: middle, но на это есть свои хитрости да и с таблицами проблем поболе будет.

[Ялекс]

kalyaka-malyaka, +1.

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

Таблицы только для представления отчетов и т.д... (контентной информации).

[Колос]

Мне кажется, что ГЛАВНОЕ достоинство вёрстки слоями это то, что это модно.

[Ялекс]

@Колос, ага.. Одно слово, что ты верстаеш слоями по всем стандартам и кроссбраузерно приводит HR-менеджера в тихую эфорию.

[rash]

Мне кажется, что ГЛАВНОЕ достоинство вёрстки слоями это то, что это модно.

Скорее это одно из достоинств.

А еще модно звучит XHTML, однако это не заставляет меня перейти на него от HTML. Еще точнее, я перешел от XHTML к HTML, и возвращаться пока причин не вижу, несмотря на то, что XHTML - это модно.

[S-art]

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

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

P.S. А что такое верстка слоями, объясните пжлст??

Edited May 15, 2009 by S-art

[s0rr0w]

Пока не появится HTML 5.0, и пока на рынке существует чудо под названием ИЕ, верстать дешевле всего дивами и таблицами.

[sc@r@bey]

Хорошо, а ссылочки на качественные мануалы не скинете?

а каковы критерии качественного мануала?

[Zippovich]

Я не отличаюсь от большинства: разметками дивами - быстро дешево сердито

Таблицы только для табличных данных.

[Searcher]

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

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

P.S. А что такое верстка слоями, объясните пжлст??

О верстке слоями:

http://blog.html.it/layoutgala/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

ну и т.д.

А растянуть концы столбцов - частный случай.

Edited May 21, 2009 by Searcher

[Aleko]

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