Непослушные HTML таблицы

Таблицы — это не тот элемент верстки, который можно сделать адаптивным. Все трюки по адаптивности разбиваются о крутые берега целесообразности самих таблиц.

Столбцы таблиц нельзя переносить (даже если и можно было бы их переносить, все равно этого нельзя делать). И даже <table> с 4-5 столбцами становится неудобной и неуклюжей, разнося в пух и прах вашу возможно адаптивную верстку; действуя как слон в посудной лавке, когда вы смотрите на страницу на девайсе с 400 точками по ширине.

Что можно сделать, если таблица необходима?

Рассмотрим несколько подходов к решению задачи.

Вариант — обойтись без таблиц, тоже имеет место для существования. К примеру, таблицу можно разместить в файле формата более для неё подходящем — pdf, xls и т.п. А на сайте сделать ссылку на этот файл. Так поступают банки, публикуя свои тарифные руководства.

Но когда таблица — это  важная часть содержания статьи, к которой нужно обращаться по мере чтения материала, то так проблему не обойти.

Таблица — картинка

Можно заменить таблицу картинкой. Это позволит работать с масштабом изображения или прибегнуть к приёму — thumbnail-fullsize. Это также позволяет более качественно оформить таблицу в каком то специализированном редакторе.

Задав CSS, вроде

вы получите авто масштабирование картинки под любой размера окна браузера. Как бы пользователь не «играл» с размерами окна, картинка не будет вылазить за края и иметь идеальные пропорции.

В статью можно вставить не полномасштабное изображение, а превью со ссылкой на полный размер (+ на ваш вкус добавить плагин полноэкранного просмотра).

Минусы: 

Так как таблица будет в виде картинки, а поисковики ещё не «умеют» читать с картинки, то о содержимом таблицы поисковый робот узнает только по описанию изображения (атрибутам alt и title и окружающему тексту).

Оптимизация таблиц

Иногда возможно «разбить» или организовать данные в таблице так, что она распадется на несколько более компактных объектов. Получившиеся таблицы станут влезать в верстку и будут нормально отображаться на любых устройствах.

Минусы:

Не всегда применимо, да и ограничения по минимальной ширине шаблона останутся.

Встраивание в контейнер с горизонтальной прокруткой

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

Обертка для таблицы должна показывать горизонтальную прокрутку, если это требуется. Добиваемся этого с помощью следующего CSS:

И, конечно, от операции «оборачивания таблица в контейнер» редактора лучше избавить, выполнив это программно перед выводом в шаблоне:

Таблица получает горизонтальную степень свободы, её становится возможным пролистывать вправо-влево независимо от остального содержания статьи. Читатель доволен. Редактор доволен, что ничего не надо больше делать со статьёй. А программист доволен, что нашел решение вечно проблемы верстки таблиц. :) Хеппи енд.

Минусы:

Хотя все счастливы, но минусы есть.

Длинные таблицы на десктопе можно «листать» влево-вправо только дойдя до нижней границы элемента <table>, т.к. линейка прокрутки отображена именно там. На мобильных устройствах такой проблемы нет, листать можно «хватаясь» за таблицу в любом месте.

Написать комментарий

Мало букафф? Читайте есчо !

Удаление бот-пользователей с сайта на Drupal

Сентябрь 22, 2015 г.

Несколько лет назад, когда решил попробовать 7ю версию drupal, я создал сайт wbserv.ru. Тогда только начали предлагать разные облачные услуги, это показалось ...

Читать

Фильтры Wordpress, заданные в текущий момент

Декабрь 20, 2016 г.

Если вам понадобилось посмотреть какие же фильтры установлены в текущий момент, то обращаться к WP API не нужно - такой функции нет. Полный список активных хуков хранится в глобальной переменной $wp_filter. [crayon-5a36938dafadd272088194/] Это массив ...

Читать

 

Комментарии к «Непослушные HTML таблицы»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: