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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Although "try to use CSS, not tables, for layout" is a very important rule that you should try to follow as much as possible, ultimately, "doing the right thing" has some cost, and when it gets too high, you should reconsider your priorities. See http://giveupandusetables.com/

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

This статья имеет подробный обзор.

Стоит отметить, что теги <table> по-прежнему законно используются при отображении табличных данных. Я использую эмпирическое правило: если я показываю что-то, что легко может быть размещено в электронной таблице, то тег таблицы - лучший вариант.

• Грузится медленнее
• Семантически неверный

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

Большинство преимуществ (быстрее, без spacer.gif, доступность, контент по сравнению с разметкой и т. д.) Уже упоминалось, но меня удивляет, что никто не упоминает, что css может делать таблицы заполнения просто не может или, по крайней мере, проще.

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

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

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

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

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

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

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

Если HTML никогда не предназначался для верстки, тогда почему у нас есть <center>, <b>, <u> или <i>? Почему у нас нет тега <story> для семантической группировки абзацев? Почему у нас 6 тегов заголовков?

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