<table> VS <div>

[volkov59]

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

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

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

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

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

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

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

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

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

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

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

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

[Nekromancer]

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

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

Например это:

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

и это:

Фамилия Имя

Иванов Ваня

Петров Петя

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

[psywalker]

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

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

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

Я бы делал на дисплей тейбле, а для ишаков на флоатах. Да, конечно для Ишаков пришлось бы классы писать для пунктов и им ширину прописывать, но что поделать.

Фамилия Имя

Иванов Ваня

Петров Петя

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

Такое делал бы таблицей, а кстати может и списком.

[Justnewone]

Такое делал бы таблицей, а кстати может и списком.

Семантически списком неверно. Есть отдельные заголовки у каждого столбца.

[slavok47]

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

Проверяйте в этой теме, я заодно погляжу

[Justnewone]

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

[rash]

Я бы делал на дисплей тейбле, а для ишаков на флоатах. Да, конечно для Ишаков пришлось бы классы писать для пунктов и им ширину прописывать, но что поделать.

Ну так и я могу :-)

В том-то и дело, что на флоатах 100% ширины не получится надежно добиться, а прописывать ширину нереально в том случае, если этот текст создается динамически (например свой в каждом разделе сайта).

Но идея понятна, я думал может ты знаешь какое-нибудь решение, которое полностью и универсально решает задачу.

[psywalker]

Ну так и я могу :-)

В том-то и дело, что на флоатах 100% ширины не получится надежно добиться, а прописывать ширину нереально в том случае, если этот текст создается динамически (например свой в каждом разделе сайта).

Но идея понятна, я думал может ты знаешь какое-нибудь решение, которое полностью и универсально решает задачу.

К сожалению эта задача решается именно таблицей либо слои+джава, сам давно ищу решение этой темы.

[Justnewone]

Но идея понятна, я думал может ты знаешь какое-нибудь решение, которое полностью и универсально решает задачу.

Без JS только таблицей. Хотя, я делал однажды, не так давно. =) JS там применялся, но не именно для этого. Залогом успеха явилась возможность флоатнуть (или абсолютом, точно не помню, пробывал и так и так) последний элемент направо и "загнать" на несколько пикселей под негу предыдущий, тем самым, визуально пропорции не разлетелись, а ширина была 100% до пиксела.

[psywalker]

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

[Searcher]

эх, максималисты...

[Justnewone]

эх, максималисты...

Самое приятное тут, что если разобраться, то потом все не сложнее таблиц.

[Searcher]

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

[psywalker]

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

Да модераторы, вы абсолютно правы

[hf3]

Кстати забавно часто наблюдать когда таблицы обарчивают в дивы и наоборот - внутрь таблиц засовывают))

зато врестка получается дивная

[Ялекс]

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

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

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

Edited January 15, 2010 by Ялекс

[psywalker]

Кстати забавно часто наблюдать когда таблицы обарчивают в дивы и наоборот - внутрь таблиц засовывают))

зато врестка получается дивная

Это уже называется "Смешанной вёрсткой"

[rash]

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

И даже несмотря на это добиться от блочного каркаса универсальности и надежности табличного практически никогда не получится.

[Justnewone]

И даже несмотря на это добиться от блочного каркаса универсальности и надежности табличного практически никогда не получится.

Наверное соглашусь. =)

Но, перекрестясь, вполне даже можно и дивами =)

[In_Variant]

и чего все спорят.

Все по ситуации: где-то удобнее дивами, а где-то и таблицу впихнуть.

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

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

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

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

Это все конечно может быть не важно. Тем более что таких "медленных" сайтов я не видела.

Тем не менее именно в этом и состоит главное отличие.