DIV против таблиц или CSS против того, чтобы быть глупым

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

Есть ли учебник/ссылка, чтобы убедить меня использовать DIV для макета?

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

@GaryF: Blueprint CSS должен быть самым лучшим в секрете CSS.

Отличный инструмент - Генератор CSS Grid Grid.

ОТВЕТЫ

Ответ 1

Там Yahoo Grid CSS, который может делать всевозможные вещи.

Но помните: CSS НЕ РЕЛИГИЯ. Если вы сохраните часы, используя таблицы вместо css, сделайте это.

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

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

Ответ 2

В Великобритании и США существует законное требование поощрения макетов CSS над таблицами. Как в разделе 508 (США), так и в Законе о дискриминации в отношении инвалидов (UK) распространяются стандарты доступности для пользователей с ограниченным зрением.

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

Инвестирование времени в изучение CSS (я использовал школы W3C и .Net Magazine http://www.netmag.co.uk) окупится.

Ответ 4

По моему мнению, предвзятость должна быть в пользу CSS над IE6 - то есть, если нет безумно веской причины (например, ваш сайт нацелен только на людей, использующих IE6, что было бы странно), лучше "отчуждать" людей используя IE6, а не людей с плохим зрением и/или автоматизированных агентов пользователя. Использование IE6 уменьшается; последняя группа увеличивается. Даже если ваш сайт не выглядит идеально в IE6, пользователям, возможно, будет легко читать его, а табличный макет будет для тех, кто его не видит.

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

Если вам нужно всего лишь потратить час на разработку общей компоновки сайта, это не плохо.

Ответ 5

CSS не может быть религией, но именно так браузеры интерпретируют HTML для макета. Нравится вам это или нет, все современные браузеры используют (в некоторой версии) модель коробки W3C. Чтобы продолжать полагаться на таблицы, мы по-прежнему полагаемся на методологию, которая просто неверна в глазах людей, которые разрабатывают технологию веб-рендеринга.

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

Если вы не чувствуете себя комфортно, занимая время, действительно изучайте CSS (так что вам нужно секунды или минуты, чтобы позиционировать элементы... не час), тогда вам нужно передать работу макета кому-то, кто действительно знает front-end.

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

Лучший онлайн-ресурс, который я нашел, - это один: http://reference.sitepoint.com/css

Но может не помешать взглянуть на книгу, такую ​​как "Разработка веб-стандартов" , что очень помогает вам понять, почему это важно.

Ответ 6

Я также думал, что Blueprint был замечательным, пока я не увидел YAML (еще один многострочный макет). Существует инструмент онлайн-строителя, который является фантастическим. Я могу получить классный многоцветный макет в течение 5 минут.

Ответ 7

Через некоторое время вы даже не задумываетесь об этом. Использование div с CSS похоже на более простой вариант imo. Кроме того, у вас больше свободы при использовании таких фреймворков, как jQuery. Я не мог представить, как сделать некоторые из классных jQuery без использования css или div. Если вы используете таблицы для стиля и макета, я чувствую, что вы упускаете много новых технологий и оставайтесь застрявшими в 90-х годах.

Ответ 8

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

И, кстати, даже таблицы не предлагают хороший способ реализации плавного расположения столбцов, поэтому совершенно не нужно прибегать к таким хакам. Предполагая, что на полпути современный браузер (т.е. > MSIE 6), таблицы не имеют никаких преимуществ перед чистым HTML + CSS, о котором я знаю.

Ответ 9

Я бы просто использовал таблицу.

По моему опыту, использование таблицы для макета будет одинаковым во всех браузерах, а CSS не будет (особенно если вы пытаетесь поддерживать IE6). Просто не стоит часов и часов кодирования, чтобы заставить макет работать в CSS, когда это можно сделать за 10 минут, используя таблицу.

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

Ответ 10

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

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

Сказав это, некоторые из фреймворков действительно помогают, и всегда лучше делать это в CSS, если вы можете управлять им.

Ответ 12

A List Apart - отличная ссылка для использования семантического HTML, Статья Святого Грааля, вероятно, является одним из лучших примеров. Кроме того, ознакомьтесь с CSS Zen Garden для некоторого вдохновения на эту тему или прочитайте книгу Дейва Ши, "Дзен дизайна CSS".

Ответ 13

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

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

Они также намного медленнее, чем их аналоги CSS. Таблицы нужно рисовать дважды, один раз для макета и снова для содержимого. Это может означать, что если у вас есть удаленное изображение или два на сервере с медленным соединением, которое ваш ENTIRE LAYOUT не будет отображать.

Используете ли вы массив для хранения словаря, если у вас есть hashmap? Нет. И вы не должны использовать таблицу, если там что-то работает, что работает лучше.