Зачем использовать таблицы для структурирования макета?
Глядя на исходный код Stack Overflow, я заметил, что они довольно часто использовали таблицы и встроенный CSS, а также кое-что, что я нашел странным, было использование форматирования атрибутов встроенных таблиц.
<table width = "100%">
Мне просто любопытно, были ли какие-то конкретные причины, по которым они использовали таблицы для структурирования своего шаблона вместо популярных (или бывших популярными) DIV.
Также ... цель использования CSS включает и использование встроенного CSS на той же странице (я знаю, что, вероятно, для этого есть отличный ответ / решение (я) ... Мне просто любопытно, что они из себя представляют)
Я понимаю, что нет ничего плохого в использовании таблиц для табличных данных ... но в этом случае для структуры используются таблицы Stack Overflows.
это также очень верно! ... я думаю, я мог бы попытаться ударить по этому .... я знаю, что, что бы я ни делал ... меня разжевывает какой-нибудь ниндзя css / div.
Ответы 14
Не участвуя в разработке SO, я говорю только в общих чертах:
Я обнаружил, что tables часто проще и согласованнее в разных браузерах, чем макеты на основе CSS.
Кроме того, случайное испускание CSS здесь и там часто случается, когда вы пытаетесь что-то сделать. Полагаю, его можно будет переработать позже.
Что касается того, почему они решили установить ширину таблицы в HTML, а не в CSS, я не могу сказать.
Я знаю, что SO использовали настоящего, честного дизайнера, когда они начинали. Однако я не знаю, дал ли этот дизайнер им изображение того, как должен выглядеть сайт, или фактическую разметку.
Пожалуйста, не зли меня за такие слова. Мы не все ниндзя CSS.
Да, но почему атрибут ширины в таблицах, а не класс CSS с шириной: 100%?
Потому что, к сожалению, они делают разные вещи.
точно? .... мне было бы интересно узнать, что Этвуд или Спольски скажут по этому поводу .... я уверен, что на это есть веская причина
Позвоните и оставьте это как вопрос для их подкаста.
Надеюсь, но я не удивлюсь, если все будет так просто, как «работает». Они кажутся практичными людьми.
Нетрудно создать макеты без таблиц после того, как вы сделали несколько.
Да, но если вы не добавите непристойное количество дополнительной разметки, они не будут вести себя одинаково в достаточно широком спектре браузеров. Имейте в виду, что некоторые из нас все еще застревают в использовании IE6 на работе по разным причинам - законным (при обновлении ломаются коммерческие приложения, которые поставщик не обновляет) / в противном случае.
да, табличный макет может выглядеть как * (& ^ во всех браузерах, особенно в визуальных браузерах ... используйте семантическую разметку !!!
Недавняя проверка исходного кода показывает, что SO на самом деле использует DIV вместо таблиц во многих местах - это может быть новым, поскольку этот вопрос был задан.
Таблицы - это не зло, но некоторые способы их использования (которые раньше были повсюду) - зло. А именно, использование разделителей, вложенных ячеек и т. д. Для управления полями и отступами.
Несмотря на то, что сейчас все говорят о макете с помощью css и div, правда в том, что css ужасен, когда дело доходит до макета. Вы можете сделать только так много. Посмотрите на некоторые предлагаемые решения, чтобы получить макеты из 2 или 3 столбцов с помощью CSS, все они отстой. Бросить <table><tr><td id = "left-column"><td id = "right-column"></tr></table> намного проще.
css просто не подходит для нетривиального макета (и под этим я имею в виду чистый div / css)
Табличное решение, которое я только что представил, должно использовать css для управления шириной, отступом, границами, фоновыми изображениями и т. д.
"они все отстой" - Не так ... макет "Святой Грааль": alistapart.com/articles/holygrail
Я думаю, вы можете делать довольно сложные макеты с помощью CSS. У вас просто может не быть волос на конце (спросите мою жену).
Я не могу себе представить, почему кто-то может подумать, что этот ответ оскорблен, если вы не согласны проголосовать против, но в ответе нет ничего оскорбительного.
Я предполагаю, что это произошло из-за исходного языка сообщений. Проверьте правки.
Мусор. Вы можете сделать больше с помощью CSS, чем с помощью таблиц.
Конечно, таблицы не могут многое сделать, точно так же, как css не может многое. Вы не можете изменить шрифт (цвет, размер, тип) с помощью таблиц. Вы не можете управлять макетом (все равно не дергая за волосы) с помощью css.
CSS намного превосходит таблицы. По общему признанию, поддержка IE может быть проблемой, но как только вы узнаете, как сделать кроссбраузерный html / css, это не так уж и сложно.
Ненавижу быть грубым, но изменить макет с помощью CSS несложно. Как только вы разберетесь с поплавками, вы сможете создавать множество различных типов макетов. Посещение CSS Zen Garden продемонстрирует это.
поплавки - это зло ... гораздо большее зло, чем когда-либо могли быть таблицы. css garden - хороший пример чего-то теоретического, не имеющего отношения к реальной жизни.
Поплавки - зло только в том случае, если вы не можете их использовать. Проверьте CSS Vault, чтобы увидеть реальные примеры отличного дизайна и работы с CSS, и вы увидите, что таблицы для структуры - это абсолютно неприемлемая область. cssvault.com
ТАК - это не сложный макет. Сказать, что этому сайту нужны таблицы для противодействия провалам css, - это слабо.
все, что выходит за рамки двух столбцов, без таблиц усложняется.
@hasen: Поплавки не являются злом при правильном использовании: они отлично подходят для таких вещей, как плавающие фигуры на краю статьи. С другой стороны, злоупотребление ими для табличной разметки - зло довольно. (Как и то, что они делали с разделителями gif, вложенными таблицами и т. д. До того, как смогли использовать CSS.)
@SamB, согласен, я изначально имел в виду именно это, использование float для верстки - зло.
SO, вероятно, написали программисты, а не веб-разработчики.
Осторожно ... их борющиеся слова. ;)
Я ничего не имею против веб-разработчиков. И программирование, и веб-разработка имеют свое место, но это совершенно разные миры. Это все равно, что сказать, что веб-разработчики не должны быть дизайнерами. Может, SO просто не нанял дизайнера?
Сразу скажу, что я тоже ничего не имею против программистов, как и я;)
CSS великолепен и может действительно упростить вашу разметку, однако иногда выравнивание содержимого с таблицами просто проще и надежнее. Также для кода, сгенерированного динамически, некоторые болевые точки для стилей, не основанных на CSS, менее серьезны. В частности, поскольку вы динамически создаете разметку, вы можете повторно факторизовать элементы стиля в функциональном коде.
Что касается встроенных стилей, я часто использую их, когда создаю страницу, а затем пытаюсь повторно преобразовать их во внешний лист позже. Это немного упрощает мое тестирование (нет необходимости выполнять жесткое обновление), а изменения находятся в одном файле, а не в двух.
Джефф и его команда делали это быстро и грязно. Это был очень быстрый цикл разработки, и у него не было времени на рефакторинг, чтобы избавиться от лишнего.
И посмотрите правде в глаза - если вы не эксперт, CSS отнимает много времени для структур таблиц.
Встроенные стили и включенный css - всего лишь знак того, что они пытались это сделать, не беспокоясь (по крайней мере, на первой итерации) о «правильном» способе сделать это. Правильный путь - это то, что работало и делалось быстро.
CSS отнимает много времени, если вы не знаете, что делаете. Если вы это сделаете, это будет так же быстро, потому что вы часто перестаете печатать меньше и тратите меньше времени на обслуживание. Быстрая и грязная разработка (потому что у вас нет навыков, чтобы делать это должным образом) - это нормально, только не вините в этом CSS.
Таблицы против Дивов - бессмысленная священная война.
Существуют определенные проблемы с использованием таблиц определенными способами для макета, которые могут вызвать проблемы. Одним из них является создание всего макета сайта в одной таблице для обработки полей и размещения - из-за способа отображения таблиц это часто означает, что веб-сайт не будет постепенно отображаться движком браузера по мере загрузки контента и может только быть визуализирован после того, как все было получено. Для пользователей большой страницы или медленного модема они могут долгое время смотреть на пустую страницу, что является «плохим». Не обращайте внимания на множество несоответствий в отображении таблиц в поколении браузеров mozilla / ie5, которые делали согласованные макеты таблиц кроссбраузерности несколько болезненными, особенно с изображениями в ячейках.
Сторонники чистого пути div любят говорить о контенте и его представлении, потому что теоретически HTML 4.01 - это чистый контент, и все это имеет смысл. Разделы обеспечивают значимую организационную структуру в абстрактном смысле, которая затем представляется исключительно с помощью CSS. В этих аргументах таблицы действительны только в том случае, если они используются для хранения фактических табличных данных. Конечно, при этом игнорируется тот факт, что для любого достаточно сложного макета почти всегда есть довольно много пустых div, плавающих просто для поддержки необходимых хуков для представления CSS, нарушая первый уровень этой абстракции. После того, как эта абстракция нарушена, нет закона, гласящего, что, когда ваш макет просто требует ловушки представления в HTML, не имеющей смыслового содержания, div в каком-то смысле более подходит, чем таблица. Если вы застряли перед выбором бессмысленного div или бессмысленной таблицы, чтобы заставить ваш макет работать, выберите то, что проще.
В конце концов, нужно знать об ограничениях всех методов и использовать наиболее подходящий. Во многих случаях использовать таблицу проще, чем настраивать бессмысленный (т.е. не имеющий смысла для содержимого) массив div, и ограничения отрисовки таблицы не применяются. Если таблица небольшая и представляет собой незначительную часть внутреннего содержимого, задержка рендеринга не имеет значения.
Я перестал использовать таблицы для структурной разметки около 2 лет назад и НИКОГДА не добавил пустой элемент, чтобы помочь со структурой. Совершенно нормально добавлять блоки div и span для помощи в структуре, но они все равно должны содержать контент.
исправление, так как я перестал использовать таблицы для структурной разметки, я НИКОГДА не добавлял пустой элемент ...
Я действительно согласен с вашим прагматическим подходом к этой проблеме. Чтобы по-настоящему воспользоваться преимуществами CSS, необходимо использовать div и промежутки так, как вы описываете ... Взгляните на CSS Zen Garden, чтобы увидеть злой пример того, как оставлять хуки CSS в HTML ....
Возможно, вы не добавили пустой элемент, но вы добавили множество специфичных для браузера хаков или кода исправления javascript - оба из них ужасны. Или вы создаете только простые страницы.
Отчасти это было бы правильно. Я прошел через процесс обучения, добавляя хаки, но как только вы привыкнете к этому, чем чище вы сделаете свой HTML / CSS, тем легче будет заставить его выглядеть и вести себя так, как вам нужно. Я полагаю, что если он не работает, вам, вероятно, нужно что-то удалить, а не что-то добавлять.
Таблицы и макет
Макет SO - нет на основе таблиц. На первый взгляд, я бы сказал, что макет SO на 80% основан на div и на 20% на основе таблиц. Таблицы используются в заголовке и в поле «значки». Использование таблиц подходит для значков IMHO (в конце концов, это список элементов), не очень хорошо для заголовка. В любом другом месте используются div.
Встроенный CSS
Опять же, используется много встроенных определений (вероятно, для быстрого создания макета структуры сайта), но SO правильно использует также css (для стилизации div и обеспечения форматирования печати).
Кхм. Если это список элементов, есть элемент список, который гораздо более подходит, чем таблица. Но что я знаю?
Я думаю, что в этом случае допустима таблица только с одним <td> на строку. В любом случае, мы не стоим перед дилеммой «div vs. table».
Откажитесь и используйте таблицы
Это опечатка, правда? Если бы это не было написано «Сдался ...»
Мои мысли были бы в том, что они пошли с таблицей, потому что (кроме таблицы аргументов vs css)
- Им нужно было быстро развернуть функциональность, чтобы высказать свое мнение
- В конце концов, это всего лишь публичная бета-версия.
- Они больше экспериментировали с ASP.NET MVC и меньше проблем с макетом
- SO - это вопросы и ответы по программированию, и, в конце концов, главное - это то, что имеет значение.
- ТАК все о признании жертвователей пунктами награждения и значки, которые он делает вполне прилично (это также может быть спорной темой).
- и так далее....
оправдания "css слишком сложен" и "таблицы быстрее и проще" вкупе с некоторыми правильными опасениями по поводу того, что не так с использованием таблиц для структурной разметки.
Вопрос в том, почему SO решил использовать таблицы, встроенный CSS и т. д., На что я думаю, ответ, вероятно, не более чем то, что либо они не знакомы с изящной деградацией и семантикой, либо они не считают это достаточно важным. посвятить время и ресурсы.
Нет ничего плохого в незнании css, но игнорировать семантическую разметку и правильное использование css только потому, что вы не знаете, что это просто НЕПРАВИЛЬНО.
Отстаивать то, что ваш сайт выглядит одинаково в каждом браузере, использующем таблицы, и при этом не задумываясь ни секунды о тех, кто не использует визуальный браузер, попахивает эгоизмом - это сильное слово, и я прошу прощения за тон, поскольку я не делаю этого. я намерен оскорбить.
Кстати, я обижен на идею, что использование таблиц для структурной разметки - это «священная война». Хотя некоторые могут подумать, что семантическая разметка чрезмерно пропагандируется, она не основана на слепой вере.
Это не всегда, основанное на слепой вере, но я обнаружил, к сожалению, высокий процент тех, для кого это ...
Некоторые люди могут быть не в состоянии сформулировать то, что они понимают, но я подозреваю, что они «понимают». За семантической разметкой есть много причин ...
Поскольку Internet Explorer не поддерживает свойство дисплей: таблица CSS, которое обеспечивает модель макета в виде сетки (эквивалентную тому, как отображаются таблицы html). Сетка-модель - это самый простой и гибкий способ моделирования множества макетов.
Итак, у вас есть три варианта, ни один из них не привлекателен:
- пожертвовать поддержкой Internet Explorer (все другие современные браузеры поддерживают свойство
display:table, которое было частью стандарта CSS2 более десяти лет) - используйте громоздкие обходные пути CSS, которые дороги и сложны в обслуживании.
- пожертвуйте смысловой чистотой и используйте TABLE-элементы.
SO выбрал последний вариант, вероятно, потому, что они думают, что поддержка Пользователи Internet Explorer важнее, чем поддержка отключенные пользователи, и потому что им нужно что-то, что можно было бы быстро разработать и просто поддерживать.
Итак, вы утверждаете, что макет SO не может быть переделан в чистом, правильном CSS без таблиц для структуры? Звучит для меня как вызов.
Нет, я утверждаю, что решение на чистом CSS (без display: table) будет более сложным и трудным в обслуживании. См. Вторую точку в списке :-)
Нет ничего плохого в таблицах HTML - для отображения табличных данных. Если бы вы знали, что делаете, вы могли бы создать SO с макетом CSS так же быстро, работая во всех основных браузерах и, вероятно, с меньшим размером (и без необходимости display: table или обходных путей)
IE6, тем не менее, поддерживает display: inline-block, который может легко заменить половину таблиц здесь без каких-либо небрежных обходных путей.
Какое совпадение! Я напечатал почти такое же электронное письмо клиенту, который настаивал на использовании CSS.
Понятия не имею, но единственное объяснение, которое я могу придумать, заключается в том, что Джефф не так поддерживает веб-стандарты, как он хотел бы, чтобы мы думали, и никто из команды не так горяч в CSS. Программисты часто используют кроссбраузерность, простоту использования и многие другие предполагаемые временные преимущества, чтобы оправдать отсутствие у них навыков CSS. И я не имею в виду, что в качестве критики они, вероятно, действительно хороши в программировании на C# / Java / Ruby / SQL / что-то еще, они просто не могут признать, что они действительно чего-то не знают, а нас кучу дизайнеров с Mac Book ...
Часто, когда люди говорят, что подход CSS сложен, они на самом деле имеют в виду, что он взломан, потому что он не поддерживается постоянно в браузерах класса A. См. Ответ JaquesB
IE8 будет последним крупным браузером, который, наконец, добавит поддержку значений CSS display: table- *, поэтому различие исчезнет. Надеюсь, это положит конец нытью о том, насколько сложен CSS, и люди смогут перестать загрязнять разметку презентацией.
За исключением того, что IE6 потребуется еще 5 лет, чтобы полностью вымереть, и 10 лет для IE7, так что, возможно, в 2019 году это применимо :-)
Я думаю, вы обнаружите, что IE довольно быстро внедряется, поскольку они автоматически выпускают обновления. Прямо сейчас Microsoft продвигает утилиту для блокировать IE8 в корп. среды.
Сейчас конец 2010 года. Я все еще получаю 25% трафика от IE6 на веб-сайте, посвященном экспериментам задыхаться HTML5 и SVG!
Мне трудно в это поверить, поскольку финансовое учреждение, над которым я работаю, получает ~ 3% IE6.
Я достаточно умный человек, по крайней мере, не намного ниже среднего, но я считаю макет css совершенно неинтуитивным. Таблицы очень интуитивно понятны. Я думаю, что одним из критериев хорошей технологии является то, как часто вам нужно обращаться к руководству, читая его. Таблицы выдувают CSS из воды таким же образом по сравнению с css. Снова и снова при использовании css мне приходится копать, чтобы понять, как сделать что-то вроде этого
Вот идея: почему бы не сделать это самим? Многие здесь утверждают, что это можно сделать (включая меня), так почему бы не создать новый вопрос (конечно, вики Сообщества) и дать пользователям возможность исправить это?