Программирование

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

Научиться писать макеты 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 настоятельно рекомендует и этот метод.

Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика