Что плохого в вёрстке таблицами?

Question

[Sirion]

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

Стал разбираться, что же тогда хорошо. Увидел чудесные атрибуты типа display:table, display:table-row и так далее, которые вешаются на не-табличные элементы, копируя при этом поведение таблиц. Что характерно, возможностей у них поменьше, чем у нормальных таблиц (никаких colspan, rowspan и так далее). И возникает неизбежный вопрос… Ну, вы поняли.

Answer 1

[egorinsk]

Начнем с того, что все, что делается таблицами, делается и CSS (просто надо не лениться и прочитать соответствующие руководства). У таблиц есть недостатки:

— нельзя перегруппировать блоки для узких страниц или в версии для печати только с помощью CSS
— если мы выводим список картинок таблицей, каждая картинка в ячейке, то при добавлении или удалении картинки оставшиеся не сдвигаются, а остается пустое место
— у ячеек width работает как min-width, при этом алгоритмы ратяжения ячеек не документированы и ведут себя непредсказуемо, из-за этого они могут непредсказуемо растягиваться, и хуже того, при динамической замене контента они не всегда сжимаются обратно и остаются дыры. Одно длинное слово или картинка может растянуть всю страницу.
— фиксированное, абсолютное и относительное позиционирование неюзабельно в таблицах
— ячейки не получится перетаскивать drag-n-drop
— трудно манипулировать DOM (надо хитро вставлять и убирать дополнительные элменеты)
— верстка получается замусоренная кучей лишних тегов, которые тяжело читать и в которых тяжело разобраться. Это не HTML, а лапша. Особенно тяжело, когда таблицы вложены друг в друга и раскиданы по куче шаблонов.
— нельзя поместить контент в коде первым, а меню в шапке — вторым (некоторые сеошники считают, что это улучшает индексацию)
— верстка таблицами всегда была костылем (и это несемантично), с поддержкой CSS2 (появилась более 10 лет назад) таблицы стали не нужны. 10 лет назад они уже стали ненужными.

Давайте, расскажите хоть одну причину использовать устаревшую много лет назад технологию. Поддержка IE4? Верстальщик-пенсионер?

Comments

[Sirion]

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

[eydemidov]

Ещё надо помнить, что таблицы — именно то решение для табличных данных. Некоторые господа так далеко уходят в only divs, что даже таблицы верстают дивами (что не меньшая шиза, чем верстать всё таблицами).

[deleted-mifki]

В таблицах vertical-align просто и удобно работает, иногда полезно.

[egorinsk]

vertical-align так же работает и для inline- и inline-block элементов.

Answer 2

[Вячеслав Голованов]

Разве что сделать адаптивную вёрстку очень сложно таблицами.

Comments

[Sirion]

Чтобы менялся лэйаут в зависимости от размера окна? Это да.

Answer 3

[Сергей Протько]

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

Comments

[Sirion]

Плохо влияет на расширяемость и поддержку кода.

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

Answer 4

[tmikwid]

Вопрос в семантичности разметки

Comments

[Sirion]

Хм… А что это такое и зачем ради него жертвовать удобством?

[Максим Дьяченко]

Удобством?
Таблицами верстали тогда когда блочный синтаксис был еще очень слаб. Потом по инерции немного.
Но удобства там не было никакого… Как вспомню — так вздрогну :)
Таблицы для таблиц, блоки для блоков.

[tmikwid]

Sirion — давайте представим себе, что есть:
1. Поисковые и иные роботы
2. Люди с ограниченными возможностями
3. Люди, пользующиеся альтернативными браузерами
…

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

Answer 5

[ertaquo]

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

Comments

[Sirion]

Вы имели в виду, «при вёрстке таблицами», я правильно понимаю?

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

[ertaquo]

Ой, точно, при верстке таблицами.
И да, вы правы. То, что по самой логике должно быть в табличной форме, оно и должно верстаться таблицей.

[Максим Дьяченко]

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

Посмотрите в сторону бутстрапа. Очень многие вопросы отпадут. До бутстрапа я вообще отказывался от верстки. Не хотел заниматься противоестественным групповым сексом по одновременному удовлетворению различных браузеров.

[Sirion]

А посмотрю. Спасибо за совет.

[Салават Ситдиков]

Sirion, посмотрите в сторону dl -> dt && dd для верстки таблиц. CSS поможет сделать их ровными, параллельными и перпендикулярными.

Answer 6

[EugeneOZ]

stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html
думаю, не стоит копипастить сюда ответ, так что просто ссылка :)

Answer 7

[spmbt]

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

Comments

[Сергей Протько]

в мобильных WEBKIT-ах с таблицами творился ад.

Answer 8

[Otkrick]

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

Comments

[spmbt]

из-за того, что для рендеринга браузер ждет закрывающего тэга

И это не главное. table-layout: fixed изобрели давно.

Answer 9

[Erick_Flatcher]

Я может щас какую то глупость скажу, но… ul/li тоже были придуманы для простых текстовых списков, а не для создания менюшек с CSS. :) Что вы про это думаете?