Зачем использовать таблицы для структурирования вашего макета?

Question

Глядя на исходный код для переполнения стека, я заметил, что они довольно часто использовали таблицы и встроенный CSS, и кое-что, что я нашел странным, было использование форматирования атрибутов встроенных таблиц.

<table width="100%">

Мне просто любопытно, были ли какие-то конкретные причины, по которым они использовали таблицы для структурирования своих шаблонов вместо популярных (или бывших популярных) DIV.

Также ... цель использования CSS включает в себя и использование встроенного CSS на той же странице (я знаю, что, вероятно, есть хороший ответ / решения для этого ... Мне просто интересно, что они собой представляют )

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

Answer 1

Таблицы против Дивов - бессмысленная священная война.

Существуют определенные проблемы с использованием таблиц, в частности, способы разметки, которые могут вызвать проблемы. Одним из них является построение всего макета сайта в одной таблице для обработки полей и размещения - из-за способа отображения таблиц это часто означает, что веб-сайт не будет отображаться прогрессивно движком браузера при загрузке контента и может только быть оказанным после того, как вся вещь была получена. Для пользователей с большими страницами или с медленным модемом они могут долгое время пялиться на пустую страницу, что является «плохой вещью». Не берите в голову много несоответствий в рендеринге таблиц в браузерах mozilla / ie5, которые делали согласованные межбраузерные макеты таблиц несколько болезненными, особенно с изображениями в ячейках.

Сторонники чистого пути div любят говорить о контенте и представлении, потому что в теории HTML 4.01 - это чистый контент, и все это имеет смысл. Div обеспечивают значимую организационную структуру в абстрактном смысле, который затем представляется исключительно CSS. В этих аргументах таблицы действительны, только если они используются для хранения фактических табличных данных. Конечно, это игнорирует тот факт, что для любого достаточно сложного макета почти всегда есть довольно много пустых div-ов, плавающих вокруг просто для поддержки необходимых хуков для представления CSS, ломая первый уровень этой абстракции. Как только эта абстракция нарушена, нет закона, утверждающего, что, когда ваш макет просто требует хука представления в HTML, который не имеет значимого содержимого, div как-то более уместен, чем таблица. Если вы застряли с выбором бессмысленного div или бессмысленной таблицы, чтобы заставить ваш макет работать, выберите тот, который проще.

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

Answer 2

Будучи не вовлеченным в разработку SO, я говорю только в общем:

Я обнаружил, что tables часто проще и более согласованны в браузерах, чем макеты на основе CSS.

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

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

Я знаю, что когда они начинали, SO использовал настоящего, честного и доброго дизайнера. Однако я не знаю, дал ли этот дизайнер им изображение того, как должен выглядеть сайт, или фактической разметки.

Пожалуйста, не сердите меня за такие слова. Мы не все ниндзя CSS.

Answer 3

SO, вероятно, было написано программистами, а не веб-разработчиками.

Answer 4

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

Несмотря на то, что сейчас все говорят о верстке с помощью css и div, правда в том, что css ужасна, когда дело доходит до верстки. Вы можете сделать только так много. Посмотрите на некоторые предлагаемые решения, чтобы получить 2 или 3 макета столбцов с помощью CSS, они все отстой. Бросить <table><tr><td id="left-column"><td id="right-column"></tr></table> намного проще.

CSS просто не подходит для нетривиального макета (и под этим я подразумеваю чистый div / css)

Решение таблицы, которое я только что выкинул, должно использовать css для контроля ширины, отступов, границ, фоновых изображений и т. Д.

Answer 5

Сдайте и используйте таблицы

Answer 6

Поскольку Internet Explorer не поддерживает свойство display: table CSS, которое обеспечивает модель макета в виде сетки (эквивалентно тому, как визуализируются html-таблицы). Грид-модель - это самый простой и гибкий способ моделирования многих макетов.

Итак, у вас есть три варианта, ни один из которых не привлекателен:

• поддержка жертвы для Internet Explorer (все другие современные браузеры поддерживают свойство display:table, которое является частью стандарта CSS2 уже более десяти лет)
• использует громоздкие обходные пути CSS, которые являются дорогостоящими и сложными в обслуживании.
• пожертвуйте смысловой чистотой и используйте TABLE-элементы.

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

Answer 7

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

Answer 8

IE8 будет последним основным браузером, который наконец-то добавит поддержку отображения CSS: table- * values, так что различие исчезнет. Надеюсь, это положит конец жалобам о том, насколько сложен CSS, и люди могут перестать загрязнять разметку презентацией.

Answer 9

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

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

Встроенные стили и включенный css - это просто знак того, что они пытались это сделать, не беспокоясь (по крайней мере, на первой итерации) о «правильном» способе сделать это. Правильный путь был тем, что сработало, и делали это быстро.

Answer 10

«css is too hard» и «таблицы быстрее и проще» оправдывают, в сочетании с некоторыми недоразумениями о том, что не так с использованием таблиц для структурной разметки.

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

Нет ничего плохого в том, чтобы не знать css, но отклонить семантическую разметку и правильное использование css только потому, что вы не знаете, что это просто НЕПРАВИЛЬНО.

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

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