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

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

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

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

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

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

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

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

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

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

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

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

Минусы: 

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

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

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

Минусы:

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

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

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

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

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

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

Минусы:

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

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

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

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

Создание контейнера DIV средствами чистого js

Август 5, 2018 г.

Иногда я возвращаюсь к практикам без использования jQuery, работая с DOM на чистом js. В таком контексте его называют vanila js. Давайте рассмотрим пример создания DIV контейнера, определения его свойств, пользуясь только javascript без библиотек-оберток. ...

Читать

Кнопка "Вверх" с анимацией прокрутки окна

Февраль 16, 2020 г.

Ставший уже привычным элемент навигации внутри страницы - кнопка "Вернуться к началу страницы". Разберем как реализовать эту функцию. План следующий: Создать HTML код кнопки; (БОНУС) Прятать кнопку, если мы и так уже в самом верху страницы. ...

Читать

 

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

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



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