<table> VS <div>

[volkov59]

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

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

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

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

- Немного меньше букв будет использоваться при верстке

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

-Не модно. Так сказали: не модно.

Три огромных плюса и один маленький минус. Но назовите мне еще минусы.

Пользователь? Да ему все равно, лишь отображалось нормально.

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

Мобильные устройства? Не заметил глюков даже на мини опере в телефоне при просмотре табличных сайтов.

Так какие еще есть минусы? Только конкретно. Я назвал три просто огромных плюса.

[Justnewone]

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

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

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

- Немного меньше букв будет использоваться при верстке

1. не правда. Только единственное - резиновые блоки одинаковой высоты, но это уже не общий лейоут. Если Вам ими проще, значит Дивами верстать у вас просто практики не хватает.

2. Дивы тоже одинаково отображаются.

3. Намного больше. + Увеличение нагрузки на парсер браузера. Таблица - один из самых сложных элементов в этом процессе.

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

так что пропорция кажется меняется резко наоборот.

[volkov59]

1. не правда. Только единственное - резиновые блоки одинаковой высоты, но это уже не общий лейоут. Если Вам ими проще, значит Дивами верстать у вас просто практики не хватает.

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

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

2. Дивы тоже одинаково отображаются.

Если верстать таблицей, то не нужно столько подгонок под ie6 и ie7. И дивы не везде одинаковы. Есть очень странные глюки с ними, которые проявляются у ie. (Я знаю, что такое стили под каждую версию), но зачем мучиться если я сделаю таблицей и быстрей и без всяких подгонок под браузеры?

3. Намного больше. + Увеличение нагрузки на парсер браузера. Таблица - один из самых сложных элементов в этом процессе.

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

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

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

Нет конкретики. Для кого это хуже? пользователь? ПС?

так что пропорция кажется меняется резко наоборот.

Если вступать в полемику, давайте без воды и в будущем только факты.

[Great Rash]

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

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

Зайдите на сайт http://csszengarden.com/ и посмотрите разные дизайны. Фишка в том, что все они сделаны только при помощи CSS, а HTML у них у всех ОДИНАКОВЫЙ. Вы никогда не добьетесь такого при помощи табличной верстки. Вам обязательно придется менять и CSS и HTML.

[Justnewone]

1. не правда. Только единственное - резиновые блоки одинаковой высоты, но это уже не общий лейоут. Если Вам ими проще, значит Дивами верстать у вас просто практики не хватает.

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

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

2. Дивы тоже одинаково отображаются.

Если верстать таблицей, то не нужно столько подгонок под ie6 и ie7. И дивы не везде одинаковы. Есть очень странные глюки с ними, которые проявляются у ie. (Я знаю, что такое стили под каждую версию), но зачем мучиться если я сделаю таблицей и быстрей и без всяких подгонок под браузеры?

3. Намного больше. + Увеличение нагрузки на парсер браузера. Таблица - один из самых сложных элементов в этом процессе.

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

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

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

Нет конкретики. Для кого это хуже? пользователь? ПС?

так что пропорция кажется меняется резко наоборот.

Если вступать в полемику, давайте без воды и в будущем только факты.

1. А давайте обезъяне палку дадим и компьютер и предположим что ей ближе? Дивами верстать ПРОЩЕ, за исключекнием 1 случая, который у меня лично встречается 1 раз на 10 - что-то там одинаковой высоты, времени я трачу на это и правду в 2 раза больше, чем если бы делал таблицей, но 10% потерянного времни, учитывая возможные косяки от таблиц вида перегруженного контента и тормозов при загрузке, для меня не существенно. А футер я прижму со всеми стилями и т.д. еще до того, как вы последний tr закроете. Не убедили в общем. И круссбраузерность полная (кроме старых опер, если дергать ширину окна верт-но, но учитывая что так делает ноль целых ноль десятых пользователей, то все хорошо).

2. Я таких проблем как правило не испытываю, точнее, не более чем в IE. Задача на смекалку, а сделайте как колспан шапке и потом во всех IE установите ширины идущих следом двух ячеек, минимум. Дивами я такое точно быстрее сделаю.

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

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

[Nekromancer]

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

Вот именно, что любой. Вёрстка таблицами - нубская вёрстка.

А чтоб верстать дивами - надо уметь. Это раз.

во вторых, когда начнёте вкладывать 5 таблиц в 5 таблиц с кучей ячеек поймёте, где кода больше, а где меньше.. и что лучше и чем проще..

П.С. Автор тролль

[psywalker]

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

[Колос]

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

[mishka]

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

Ничего сложного в верстке дивами невижу.

Табличками верстал только email, даже в небольшой страничке легко запутаться среди кучи tr-td.

Табличкой наверное проще верстать только элементарные макеты.

А то что табличками быстрее верстать - никогда неповерю.

Edited January 14, 2010 by mishka2

[rus]

Ну может хватит уже, а?

Сколько можно поднимать эту замусоленую тему (как во флейме про ИЕ 6)?

ТС, верстайте так, как считаете нужным, нам же больше достанется денег

[rash]

3. Намного больше. + Увеличение нагрузки на парсер браузера. Таблица - один из самых сложных элементов в этом процессе.

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

<div></div>

против

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

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

[hf3]

На многих форумах - табличная верстка - тот же торрент.ру - каркас - таблица - а внутри дивы)

Наверное для определенных сайтов , типо форумов это бывает оправдано. Рамблер сверстан на таблицах.

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

Но суть в том - что уже давно уже давно придуманы свойства display - table-row и table-cell - которые заставляют блоки вести себя как ячейки таблицы. и они поддерживаются всеми браузерами , втом числе 8 ослом.

Осталось дождаться пока уйдут 6 и 7 ИЕ (2-5 лет) - и проблема решится)) И волки сыты и овцы в дивах.

Edited January 14, 2010 by hf3

[Ялекс]

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

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

Edited January 14, 2010 by Ялекс

[rash]

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

Вопрос: блоки или таблицы.

месяц-два: таблицы! Удобно и просто!

полгода-год: блоки! правильно, модно и семантично.

еще через некоторое время: все равно как, смотря с помощью чего удобнее.

[Игорь Ермаков]

Ой да ради бога, верстайте чем хотите лишь бы работало.

А вот чисто моё мнение: начинающему вообще не надо на этом заморачиваться, а надо просто втыкать, втыкать и ещё раз втыкать, а если уже зрелый верстальщик не может сам разобраться с вопросом, который поднял ТС, то он просто неисправимый дебил и с этим ничего не поделать, вот.

[Justnewone]

Если Вам ими проще, значит Дивами верстать у вас просто практики не хватает.

То же самое по уровню умения, что лишнюю строку к таблице прописать

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

[psywalker]

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

[rash]

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

Ну нужели не вспоминается ни одного примера, где таблица была бы надежнее и не подвела в неожиданной ситуации?

Когда какая-то колонка должна тянуться по контенту, когда мы не знаем размеров да и вообще характера содержимого какого-нибудь элемента?

Мне чаще именно такие случаи попадаться стали.

[psywalker]

Ну нужели не вспоминается ни одного примера, где таблица была бы надежнее и не подвела в неожиданной ситуации?

Когда какая-то колонка должна тянуться по контенту, когда мы не знаем размеров да и вообще характера содержимого какого-нибудь элемента?

Мне чаще именно такие случаи попадаться стали.

Не вопрос, я полностью в себе уверен и знаю, что смогу решить ЛЮБУЮ задачу с помощью Именно слоёв, если хочешь, можем проверить легко. Заодно и докажем ТС, что для слоёв ничего невозможного НЕТ и что это намного удобнее.

[Nekromancer]

1-2 табличных элемента на странице - не есть вёрстка таблицами, есть использование таблиц по назначению. Всё же остальное в этой схеме делается дивами.

[psywalker]

1-2 табличных элемента на странице - не есть вёрстка таблицами, есть использование таблиц по назначению. Всё же остальное в этой схеме делается дивами.

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

[Nekromancer]

Имел введу не только табличные данные.. а например один табличный элемент на странице.. Да, можно сделать блоками, чуть помудрив. Но иногда, очень редко можно просто поставить таблицу.. для простоты.. и это не будет табличной вёрсткой..

[Justnewone]

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

[psywalker]

Имел введу не только табличные данные.. а например один табличный элемент на странице.. Да, можно сделать блоками, чуть помудрив. Но иногда, очень редко можно просто поставить таблицу.. для простоты.. и это не будет табличной вёрсткой..

Что ты имеешь ввиду под "Табличными элементами"? Если можно, то картинку, пример.

[Justnewone]

Что ты имеешь ввиду под "Табличными элементами"? Если можно, то картинку, пример.

Фамилия Имя

Иванов Ваня

Петров Петя

Сидоров Сидор.

[rash]

Не вопрос, я полностью в себе уверен и знаю, что смогу решить ЛЮБУЮ задачу с помощью Именно слоёв, если хочешь, можем проверить легко. Заодно и докажем ТС, что для слоёв ничего невозможного НЕТ и что это намного удобнее.

Ну давай попробуем.

Сейчас сходу придумаю что-нибудь небольшое.

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