Почему вы должны избегать таблиц для макетов веб-страниц

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

Таблицы не доступны

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

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

С помощью CSS вы можете определить раздел как принадлежащий на левой стороне страницы, но поместить его последним в HTML. Затем программы чтения с экрана и поисковые системы будут сначала читать важные части (контент), а последние — менее важные (навигация).

Столы хитрые

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

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

CSS также может быть сложным, но он отделяет презентацию от HTML и значительно облегчает поддержку в долгосрочной перспективе. Кроме того, с помощью макета CSS вы можете написать один файл 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 настоятельно рекомендует и этот метод.

Таблицы для макета могут повлиять на ваши перспективы работы

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

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

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

Мораль: научиться использовать CSS

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

Ссылка на основную публикацию