Учимся писать CSS макеты могут быть сложными, особенно если вы знакомы с использованием таблиц для создания причудливых макетов веб-страниц. Но пока HTML5 позволяет таблицы для разметки, это не лучшая идея.
Таблицы недоступны
Похожий на поисковые системы, большинство программ чтения с экрана читают веб-страницы в том порядке, в котором они отображаются в HTML, а анализировать таблицы программам чтения с экрана может быть очень сложно. Содержимое в макете таблицы, хотя и является линейным, не всегда имеет смысл при чтении слева направо и сверху вниз. Кроме того, наличие вложенных таблиц и различных диапазонов ячеек таблицы может затруднить понимание страницы.
Это причина того, что Спецификация HTML5 рекомендует против столы для макета и почему HTML 4.01 запрещает это. Доступные веб-страницы позволяют большему количеству людей использовать их и являются отличительной чертой профессионального дизайнера.
С помощью CSS вы можете определить раздел как принадлежащий левой стороне страницы, но разместить его последним в HTML. Тогда программы чтения с экрана и поисковые системы будут в первую очередь читать важные части (контент), а менее важные части (навигация) - в последнюю.
Таблицы сложны
Даже если вы создадите таблицу с помощью веб-редактора, ваши веб-страницы все равно будут сложными и трудными в обслуживании. За исключением самых простых дизайнов веб-страниц, большинство макетов таблиц требуют использования множества атрибутов и вложенных таблиц.
Построение таблицы может показаться простым, пока вы это делаете, но как только это будет сделано, вам нужно будет ее поддерживать. Спустя шесть месяцев может быть не так просто вспомнить, почему вы вложили таблицы или сколько ячеек было в строке, и так далее. Не говоря уже о том, что если вы поддерживаете веб-страницы в качестве члена команды, вы должны объяснять всем участникам, как работают таблицы, или ожидать, что им потребуется дополнительное время, когда им нужно будет внести изменения.
CSS тоже может быть сложным, но он отделяет презентацию от содержимого и значительно упрощает поддержку в долгосрочной перспективе. Кроме того, с помощью макета CSS вы можете написать один файл CSS и оформить все свои страницы так, чтобы они выглядели именно так. Затем, когда вы хотите изменить макет своего сайта, вы просто меняете один файл CSS, а весь изменения сайта - больше не нужно просматривать каждую страницу по очереди, чтобы обновить таблицы, чтобы обновить макет.
Таблицы негибкие
Хотя можно создавать макеты таблиц с процентной шириной, они часто загружаются медленнее и могут кардинально изменить внешний вид макета. Но если вы используете для своих таблиц заданную ширину, вы получите очень жесткую компоновку, которая не будет хорошо смотреться на мониторах, размер которых отличается от вашего.
Создание гибких макетов, которые хорошо смотрятся на многих мониторах, браузерах и разрешениях, относительно просто. Фактически, с помощью медиа-запросов CSS вы можете создавать отдельные дизайны для экранов разного размера.
Таблицы мешают поисковой оптимизации
Наиболее распространенный макет, созданный с помощью таблиц, использует панель навигации в левой части страницы и основное содержимое справа. При использовании таблиц этот подход (как правило) требует, чтобы первое содержимое, отображаемое в HTML, было левой панелью навигации. Поисковые системы классифицируют страницы на основе контента, и многие системы определяют, что контент, отображаемый в верхней части страницы, более важен, чем другой контент. Таким образом, страница с левой навигацией первой будет иметь менее важный контент, чем навигация.
Используя CSS, вы можете сначала поместить важный контент в свой HTML, а затем использовать CSS, чтобы определить, где его следует разместить в дизайне. Это означает, что поисковые системы первыми увидят важный контент, даже если дизайн размещает его ниже на странице.
Таблицы не всегда хорошо печатаются
Многие дизайны столов плохо печатаются, потому что они слишком широки для принтера. Итак, чтобы подогнать их под размер, браузеры вырезают таблицы и распечатывают разделы ниже, в результате чего страницы не пересекаются. Иногда получаются страницы, которые выглядят нормально, но вся правая сторона отсутствует. На других страницах разделы будут напечатаны на разных листах.
С помощью CSS вы можете создать отдельную таблицу стилей только для печати страницы.
Таблицы для макета недействительны в HTML 4.01
В Состояния спецификации HTML 4: «Таблицы не должны использоваться исключительно как средство для компоновки содержимого документа, поскольку это может вызвать проблемы при рендеринге на невизуальные носители».
Итак, если вы хотите написать действительный HTML 4.01, вы не можете использовать таблицы для макета. Таблицы следует использовать только для табличных данных, а табличные данные обычно выглядят как то, что вы можете отобразить в электронной таблице или, возможно, в базе данных.
Однако HTML5 изменил правила, и теперь таблицы для разметки, хотя и не рекомендуются, считаются допустимым HTML. Спецификация HTML5 гласит: «Таблицы не должны использоваться в качестве вспомогательных средств разметки». Это связано с тем, что программы чтения с экрана трудно различить таблицы для макета, как упоминалось ранее.
Использование CSS для позиционирования и компоновки страниц - единственный допустимый способ HTML 4.01 для получения дизайна, который вы использовали для создания таблиц, и HTML5 настоятельно рекомендует этот метод.