Table vs div

Web-разработка

Автор: Александр Степанов

1 нояб. 2011 г., 09:11:57  978


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

Миф 1. Поддержка таблиц идентична во всех популярных браузерах.
С первого взгляда может показаться, что это действительно так. И действительно, спецификация таблиц в стандарте HTML 4 достаточно удачна, и практически во всех современных браузерах она, в общем, реализована относительно одинаково. Действительно, табличная разметка надежна и предсказуема.
Но, к сожалению, это лишь для общих тривиальных случаев. Как только требуется немного копнуть вглубь и провести манипуляции с шириной и высотой колонок, с бордерами, отступами и прочей атрибутикой таблиц, то становится ясно, что разные браузеры могут выводить несколько разные варианты. И более того, если копать еще глубже, то механизм отображения таблиц может даже мешать сделать то, что нужно для достижения одного и того же результата на разных браузерах.
То есть, табличная верстка не спасает от необходимости уделять довольно большое количество времени на поддержку различными типами и версиями браузеров.
Миф 2. Табличная верстка проще, занимает меньше времени, и поэтому дешевле.
Трудно не согласиться с этим. Что может быть проще, чем объявить таблицу, задать ширину колонок, и знай себе наполняй ячейки данными. Этому легко можно научить даже школьника младших классов.
Но опять-таки, это только для общих простых случаев. А что делать, если нужны вложенные таблицы? А если многократно вложенные? А если ячейки должны быть закругленными, иметь разноцветные бордюры и фон, закрывающий лишь часть ячейки таблицы? Тут уже, если пользоваться табличной версткой, придется генерировать значительное количество HTML кода, а именно, открывающих и закрывающих вложенных тегов, таких как, например

, и

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



Миф 3. Отрисовка таблиц браузером происходит быстрее, чем DIV со стилями.
Возможно это и так насчет отрисовки (хотя не факт). Но для интерактивной системы, которой является браузер, вряд ли имеют значения микросекунды. То есть, можно сказать, что это неважно для современных компьютеров.
Но у таблиц есть не очень приятная особенность. Пока таблица не загрузится полностью, ее содержимое не отображается. Это происходит потому, что браузеру необходимо вычислить высоту и ширину ячеек таблиц, что часто невозможно сделать, не зная содержимого. Даже стиль table-layout: fixed не всегда помогает ускорять загрузку.
То есть, тут уже влияет не скорость отрисовки, а скорость загрузки, которая потенциально может иногда быть очень низкой. Это уже серьезно. Иными словами, таблицы не подходят для вывода контента с большим объемом информации, так как пользователи на низкоскоростных соединениях будут ждать загрузки неприемлемо долго.

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

Миф 5. Таблицы не влияют на индексирование сайтов поисковиками.
Все-таки влияют, причем отрицательным образом. Происходит это из-за более низкого отношения выводимого текстового контента к количеству тегов разметки, информация получается более раздробленной, парсеру поискового робота труднее раскопать полезную информацию в дебрях вложенных табличных тегов, особенно если туда вкралась ошибка.
Например, специалисты по SEO скажут, что допустим портал на базе PHPNuke раскручивать несколько сложнее, чем на Xaraya. Именно по этой причине.


Теперь обобщим.


Это были основные мифы о преимуществах таблиц, которые в ходу у сторонников табличной верстки, и которые используются против сторонников использования стилей. Но реальность их не подтверждает, тем более что нельзя забывать о прямых недостатках использования таблиц.
Автор лично для себя пришел к выводу, что универсальной стратегии для верстальщика нет, и нужно каждый раз выбирать свою методику решения для каждого проекта, в зависимости от изначальных требования заказчика. Если таких требований у заказчика на момент старта проекта нет, то нужно исполнителю самому сформулировать эти требования, и дать заказчику «на подпись», иначе потенциально возможен риск – бесплатная переделка кода, точнее не бесплатная, а за счет исполнителя.
Например, для верстальщика было бы ошибкой не оговорить четкий перечень браузеров и их версий, не определить должна ли быть зависимость от разрешения экрана потенциальных пользователей, не предусмотреть внешний вид страниц при отключенной на браузере клиента графике и JavaScript, и так далее.
Если с версиями браузеров порядок, и требования заказчика позволяют использовать каскадные таблицы стилей для верстки HTML страниц, то автор склоняется к тому, чтобы использовать именно это решение со стилями. Это идеологически более правильно, плюс дань прогрессу который движется именно этим путем. Хотя, если нужно сделать нечто примитивное, плюс жадный заказчик экономит на верстке, то автор все-таки вспоминает про таблицы…
 

Ссылки 

Еще одна статья с громким названием
http://www.yyztech.ca/reviews/book/everything-you-know-about-css-is-wrong