Обучение написанию макетов 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 для макета.
