Почему использование таблиц для макета сайта такое зло

Question

Я - разработчик Winforms и бизнес-движка, который использует asp.net впервые за более чем 2 года, и за это время я заметил несколько изменений в соглашениях.

Какова логика движения против 'таблиц для макета'?

Позволяет ли использовать классы CSS для обработки разметки, и если да, то действительно ли это является проблемой на страницах, которые, как вы уверены, останутся статичными, или это просто считается "некрасивым"?

Answer 1

Несколько дополнительных очков:

• Не будь фанатиком по этому поводу. CSS не идеален, и есть некоторые вещи, которые можно сделать намного проще с помощью таблиц. Поэтому, если вам нужно, поставьте туда маленький столик. Это тебя не убьет.

• Основным «злом» макетов на основе таблиц был вид глубоко вложенного беспорядка, который раньше был единственным способом получить точный контроль над страницей. У вас будут таблицы внутри таблиц внутри таблиц, а прозрачные изображения будут стратегически размещены для контроля расстояния. Я думаю, что это довольно редко в наше время, и CSS позволит вам убрать 90% этого беспорядка.

• Хорошей целью является «семантическая сеть», в которой есть теги, чтобы придать смысл странице, а не описывать макет. Тем не менее, текущая версия HTML не очень далеко до ее достижения. В результате у вас ВСЕГДА будет много тегов на ваших страницах, которые предназначены только для макета, и не имеют никакого другого значения. Это не означает, что вы не должны пытаться разделить контент и макет как можно больше; это просто означает, что вы не получите 100%.

Answer 2

затрудняет доступ. Представьте, что вы текстовый браузер и хотите вслух зачитывать содержание сайта слепым людям. Большинство табличных макетов, как правило, очень трудно разобрать и «понять» для машины.

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

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

Answer 3

Стоит отметить, что теги

Answer 4

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

Здесь несколько пунктов, которые более подробно отвечают на вопрос

• Таблицы медленные
• Таблицы могут быть негибкими
• Проблемы с доступностью упрощаются с помощью CSS
• Таблицы не ухудшаются
• Таблицы также не печатаются

Answer 5

На sitepoint есть довольно хорошая статья , в которой проектирование страницы в таблицах сравнивается с CSS. Это довольно интересное чтение, в котором освещаются некоторые основные подводные камни для дизайнера / разработчика при использовании таблиц, таких как искаженный исходный код с таблицами, часто требуется дополнительный исходный код и будущие изменения неизбежно усложняются.

Answer 6

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

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

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

Answer 7

Честно говоря, толпа противников столов часто виновна в том, что они просто нацисты по стандартам. Дело в том, что люди используют таблицы для разметки, так как «лидерство» связано с использованием реального лидерства.

Основным аргументом против таблиц является accessiblity; и это важная тема. Тем не менее, CSS - всего лишь решение проблемы преступника: HTML - ужасный язык разметки!

Если HTML никогда не предназначался для макета, то почему у нас есть

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

Answer 8

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

Answer 9

Идея состоит в том, что разметка содержимого / , означающего страницы, является более удобной задачей не только потому, что она делает ее легко модифицируемой и стилизованной, но также (возможно, более важно), потому что это улучшает доступность для тех, кто использует программы чтения с экрана и т. д. (и для поисковых систем!). Читайте Окунитесь в Доступность когда-нибудь. [И если у вас есть табличные данные, вы, конечно, должны использовать таблицу.]

Хотя «стараться использовать CSS, а не таблицы, для разметки» - это очень важное правило, которому вы должны стараться следовать, насколько это возможно, в конечном счете, «делать правильные вещи» имеет определенную стоимость, а когда она становится слишком высокой Вы должны пересмотреть свои приоритеты. См http://giveupandusetables.com/

Answer 10

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