DIV против таблиц или CSS против глупости

Question

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

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

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

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

Отличный инструмент - Blueprint Grid CSS Generator .

Answer 1

Есть Yahoo Grid CSS , которая может делать все что угодно.

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

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

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

Answer 2

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

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

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

Answer 3

Почему таблицы для разметки глупы: определены проблемы, предложены решения .

Answer 4

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

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

• Пуленепробиваемый веб-дизайн , Дэн Седерхольм
• Мастерство CSS , Энди Бадд

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

Answer 5

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

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

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

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

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

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

Answer 6

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

Answer 7

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

Answer 8

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

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

Они также отображаются намного медленнее, чем их CSS-аналоги. Таблицы должны быть составлены дважды, один раз для макета, и снова для контента. Это может означать, что если у вас есть удаленный образ или два на сервере с медленным соединением, то ваш ВНЕШНИЙ РАЗРЯД не будет отображаться.

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

Answer 9

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

Answer 10

Вы можете найти вдохновение здесь: http://blog.html.it/layoutgala/