DIV против таблиц или CSS против глупости
Я знаю, что таблицы предназначены для табличных данных, но очень заманчиво использовать их для макета. Я могу обрабатывать DIV, чтобы получить макет из трех столбцов, но когда у вас есть 4 вложенных DIV, это становится сложно.
Есть ли учебник / справочник, чтобы убедить меня использовать DIV для макета?
Я хочу использовать DIV, но отказываюсь тратить час на то, чтобы разместить DIV / SPAN там, где я хочу.
@GaryF: Чертеж CSS должен быть самым большим секретом CSS.
Отличный инструмент - Генератор CSS-сетки Blueprint Grid.
@Mauro: я не говорил о четырехколоночной компоновке, я имел в виду глубокое вложение DIV
Вы должны знать, что вокруг Blueprint существует определенная степень разногласий: jeffcroft.com/blog/2007/nov/17/…jeffcroft.com/blog/2007/nov/18/follow-up-css-frameworks Просто кое-что, о чем следует знать. :)
Эта дискуссия также довольно хорошо освещена здесь - stackoverflow.com/questions/30251/tables-instead-of-divs#302 71. Такие шаблоны, как Blueprint, великолепны, но борьба с созданием собственных макетов (возможно, не в коммерческих проектах) - отличный способ изучить CSS.
Также учтите: если у вас есть табличные данные, нет ничего плохого в использовании таблицы. Это просто не нужно для верстки <i> сайта </i>.
Ответы 13
Это может быть бесполезным, но я почему-то не понимаю всех этих проблем, связанных с CSS. Если дизайнер газеты попытается встроить фильм в рекламную страницу, все согласятся, что он немного сумасшедший. Но все же те же люди тоскуют после трехколоночных макетов в HTML. HTML просто не способен на данный момент хорошо справляться с такой компоновкой. Кроме того, многоколоночные макеты обычно не очень хорошо подходят для чтения на компьютерных мониторах. Неужели нет жизнеспособных альтернатив?
И, кстати, даже таблицы не являются хорошим способом реализации гибкой компоновки столбцов, так что это вовсе не причина прибегать к подобным хитростям. Предполагая, что современный браузер находится на полпути (например,> MSIE 6), таблицы не дают никаких преимуществ перед чистым HTML + CSS, о котором я знаю.
За исключением того, что HTML может с этим справиться. Что не может справиться с этим, так это CSS.
Можете быть более конкретными? Что именно не может обработать CSS?
Конрад упомянул, что «макет из трех столбцов» не может быть реализован в HTML. Таблицы очень легко достигают этого. Аналогичная история со 100% высотой элементов и вертикальным выравниванием. CSS имеет тенденцию терпеть неудачу в таких ситуациях, и вместо того, чтобы работать над стандартом того, как люди работают, они критикуют дизайн.
Я считаю, что стандартный является расширяется - "расширенный модуль компоновки" css3 (w3.org/TR/css3-layout) даст нам многое из того, что нам здесь требуется. Конечно, пройдет некоторое время, прежде чем CSS3 получит широкую поддержку. К. только сказал, что трехколоночный макет не может быть "ХОРОШО" в HTML.
CSS очень хорошо справляется с макетами с несколькими столбцами. Вы думаете, что несколько столбцов означают «одну статью, разделенную на несколько столбцов» (как и ваша ежедневная газета), но это не так. Стандартный дизайн страницы: nav | content | etc - это тоже несколько столбцов, и CSS может с этим справиться.
Да, но CSS не может хорошо справиться с тем, что люди предполагают. Близорукость CSS всегда объясняется обвинением разработчика. CSS всегда лучше, когда он работает, но я не люблю сторонников, обвиняющих разработчика в том, что он пытается сделать то, что хотят пользователи.
Graphain, моя точка зрения была точно, что CSS может обрабатывать так же, как таблицы. Конечно, многоколоночные макеты требуют некоторых хитростей, но они возможны. Однако ни CSS, ни таблицы не могут разбить непрерывный текст на несколько столбцов (хотя даже для этого в CSS / JS есть хаки).
@Vili: Да, они сумасшедшие. Они используют его для рекламы! … И это просто показывает, как быстро устоявшиеся истины в технологиях устаревают. Ага. Кто-нибудь, подайте мне новый пример ... как насчет флеш-игр в газетах?
Есть Yahoo Grid CSS, который может делать все что угодно.
Но помните: CSS - НЕ РЕЛИГИЯ. Если вы экономите часы, используя таблицы вместо css, сделайте это.
Один из крайних случаев, о котором я никогда не мог подумать, - это формы. Я бы хотел сделать это в css, но это намного сложнее, чем таблицы.
Вы даже можете утверждать, что формы - это таблицы, поскольку у них есть заголовки (метки) и данные (поля ввода).
Строго говоря, форма (почти) никогда не бывает таблицей. Каким будет заголовок столбца для данных - «поля ввода»? Используя этот аргумент, вы можете утверждать, что все является таблицей: абзац - это одноклеточная таблица ... Поддержка форм довольно неприятна, в основном потому, что производители браузеров расходятся во мнениях.
Я бы сказал, что ярлыки - это заголовки. Есть даже аргумент, чтобы указать горизонтальное расположение IIRC
Хорошо, но набор данных с одной строкой заголовков и одной строкой данных семантически ближе к списку определений, чем таблица.
Существует несколько способов разметки форм без использования таблиц, каждый из которых обеспечивает более компактную разметку, которая также лучше работает в программах чтения с экрана. Посмотрите wufoo.com для некоторых примеров.
Я бы просто использовал стол.
По моему опыту, использование таблицы для макета будет работать одинаково во всех браузерах, а CSS - нет (особенно если вы пытаетесь поддерживать IE6). Просто не стоит тратить часы на код, чтобы заставить макет работать в CSS, когда это можно сделать за 10 минут с помощью таблицы.
Другое преимущество использования таблиц заключается в том, что ваш макет может очень легко динамически изменяться в соответствии с содержимым. Попытка добиться этого с помощью CSS - огромный кошмар.
Я считаю, что у CSS есть множество ограничений, которые, кажется, лишь намекают на то, что дизайнеры спецификаций не зарабатывают на жизнь веб-сайтами.
Используйте таблицы HTML, если вы не можете легко сделать это с помощью CSS.
Сказав это, некоторые фреймворки действительно помогают, и всегда лучше делать это в CSS, если вы можете с этим справиться.
На мой взгляд, предпочтение должно быть в пользу CSS, а не IE6 - то есть, если нет безумно веской причины (например, ваш сайт нацелен только на людей, использующих IE6, что будет странный), лучше «оттолкнуть» людей, использующих IE6. чем люди с плохим зрением и / или автоматизированные пользовательские агенты. Использование IE6 сокращается; численность последней группы увеличивается. Даже если ваш сайт не выглядит идеально в IE6, этим пользователям, вероятно, будет легче его прочитать, чем тем, кто не может его увидеть, будет компоновка на основе таблиц.
Это очень общий вопрос, поэтому сложно дать конкретный ответ. Две книги, которые являются отличным источником информации:
- Пуленепробиваемый веб-дизайн, Дэн Седерхольм
- Мастерство CSS, Энди Бадд
Если вам нужно потратить всего час на разработку общего макета сайта, это неплохо.
В Великобритании и США есть законное требование о предпочтении макетов CSS перед таблицами. И раздел 508 (США), и Закон о дискриминации инвалидов (Великобритания) охватывают стандарты доступности для пользователей с ограниченным зрением.
В Великобритании законодательство распространяется настолько далеко, что фактически делает незаконным коммерческое производство сайта, ограничивающего возможности слабовидящего пользователя, точно так же, как теперь незаконно иметь магазин с шагом для входа в него и никаким способом. для инвалида-колясочника - по общему признанию, уголовного преследования по поводу доступности веб-сайта пока не было. Однако я всегда буду использовать CSS, поскольку это означает, что дизайн вашего сайта намного проще поддерживать в долгосрочной перспективе.
Время, потраченное на изучение CSS (я использовал школы W3C и .Net Magazine http://www.netmag.co.uk), окупится.
То же самое и в Германии, но только для веб-сайтов федеральных ведомств.
Здесь вы можете найти вдохновение: http://blog.html.it/layoutgala/
Почему таблицы для верстки - это глупо: обозначены проблемы, предложены решения.
Я видел это некоторое время назад, хотел связать это в вопросе, но не смог найти
И думать было для Сейболда в 2003 году, а люди до сих пор спорят за столы!
Возможно, CSS не является религией, но именно так браузеры интерпретируют HTML для макета. Нравится вам это или нет, но все современные браузеры используют (некоторые версии) коробочную модель W3C. Продолжать полагаться на таблицы - значит продолжать полагаться на методологию, которая совершенно неверна в глазах людей, разрабатывающих технологию веб-рендеринга.
Я знаю, что иногда CSS может показаться ужасно сложным, но я считаю, что это необходимость в наши дни (поверьте мне, ваши клиенты захотят этого).
Если вам неудобно тратить время на изучение CSS (так что вам нужны секунды или минуты, чтобы позиционировать элементы ... а не час), тогда вам нужно передать работу над макетом тому, кто действительно знает, что такое фронт. конец.
Да, есть много проблем с текущими реализациями CSS в браузере, но ничего настолько серьезного, что вы когда-либо почувствовали бы необходимость вернуться к макету на основе таблиц. Просто сядьте и найдите время, чтобы изучить его, как любой другой язык или фреймворк.
Вот лучший онлайн-справочник, который я нашел: http://reference.sitepoint.com/css
Но, возможно, будет неплохо взглянуть на такую книгу, как Проектирование с использованием веб-стандартов, которая во многом поможет вам понять, почему этот материал важен.
Я также думал, что Blueprint великолепен, пока не увидел YAML (Еще один многоколоночный макет). Есть фантастический онлайн-конструктор. Я могу получить классный многоколоночный макет за 5 минут.
Список отдельно - отличный справочник по использованию семантического HTML, Статья о Святом Граале, вероятно, один из лучших примеров. Кроме того, посмотрите CSS Zen Garden для вдохновения по этой теме или прочтите отличную книгу Дэйва Ши «Дзен дизайна CSS».
Вы используете CSS для макета, потому что он не только семантически правильный, но и потому, что у таблиц есть несколько недостатков.
Таблицы ужасны с точки зрения доступности, потому что они нарушают работу почти всех программ чтения с экрана, что, в свою очередь, дает слабовидящим людям бесполезную информацию из-за того, как читаются таблицы.
Они также отображаются намного медленнее, чем их аналоги в CSS. Таблицы нужно рисовать дважды: один раз для макета и еще раз для содержимого. Это может означать, что если у вас есть одно или два удаленных изображения на сервере с медленным соединением, ВЕСЬ МАКЕТ не будет отображаться.
Вы бы использовали массив для хранения словаря, когда у вас есть хэш-карта? Нет. И вы не должны использовать стол, когда есть что-то, что работает лучше.
Через некоторое время вы даже не думаете об этом. Использование div с CSS кажется более простым вариантом. Кроме того, у вас больше свободы при использовании таких фреймворков, как jQuery. Я не мог себе представить, как делать некоторые классные вещи с jQuery без использования css или div. Если вы используете таблицы для стиля и макета, я чувствую, что вы упускаете много новых технологий и застреваете в 90-х.
Вам нужны CSS и html для макета из 4 столбцов? Если вы дадите мне знать, он у меня уже есть.