Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

HTML верстка с помощью тегов table для адаптивных сайтов

admin | 26.12.2017 | нет комментариев

Так сложилось, что на ранних этапах развития веб сферы, макеты практически всех сайтов базировались на таблицах. Эта технология себя полностью оправдывала, так как требования к сайтам в 90-е и 2000-е, в основном сводились к читабельности текстов, расставлению ключевых слов и навигационных ссылок. Мониторы в то время были «плюс-минус» одинаковой ширины (800-1200 пикселей) и речи о том, чтобы сайт подстраивался под ширину экрана, не возникало. Почти все сайты были фиксированной ширины, и этого было вполне достаточно.

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

Заглянув в список HTML тегов видим, что сейчас тег <div> – это блочный элемент, один из основных элементов верстки. Тег <table>, в свою очередь, это тег определяющий таблицу. Конечно же, такое разделение относительное (вы все еще можете верстать макеты на основе таблиц), но все-таки верстка таблицами, во многих случаях, больше не целесообразна, что и подтверждает определение из HTML справочника.

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

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

На вопрос: «стоит ли пытаться сделать адаптивный сайт на основе table?», отвечу нет. Возможно ли это? – Да, возможно, например, сделав по отдельной таблице для 4-х основных размеров экранов и в зависимости от ширины окна браузера скрывать 3 неподходящие версии через CSS, оставляя только нужную. Но игра не стоит свеч.

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

Поэтому верстайте макеты блоками с помощью тегов <div>, используйте современные технологии, если нужно фреймворки и все у вас будет работать как нужно.

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB