Таблицы размещаемые на вэб-страницах иногда не отображаются полностью по ширине экрана браузера мобильных устройств. На примерах рассмотрим и проанализируем, как правильно составить таблицу на три — четыре колонки так, чтобы она разместилась в пределах экрана мобильных устройств.
Для размещения данных в таблицах без выхода за границы экрана на мобильных устройствах используем два способа составления таблицы: путь проб и ошибок и обдуманный, основанный на выводах из практики.
Примеры (Из практики данного интернет проекта).
Таблица на три колонки
ДГМ в переключательных СВЧ диодах
Составим таблицу, приняв ширину столбцов: 31+9+10, на ширину экрана (50 мм.), указываем (с запасом на 1%): 49%:
| Переключательный СВЧ диод | Содержание драгоценных металлов | |
|---|---|---|
| Золото (мг.) | Серебро (мг.) | |
| 2А599А-3…Г-3* | 19,34 | 4,822 |
Эта таблица на три колонки, на экранах мобильных устройств не вместилась в ограниченные пределы экрана и приняла вид — 29+12+15 на 56%. (Не вместилась «о» 3-й колонки; Термин «Переключательный» заполнил 60% экрана. ) 2. ДГМ в переключательных СВЧ диодах Уменьшим ширину букв слов «Переключательный» и «Серебро», а слова: «драгоценных металлов» заменим коротким синонимом «ДГМ». Подкорректируем и ширину столбцов таблицы до: 24+12+13 при 49%:
| Переключательный СВЧ диод | Содержание ДГМ | |
| Золото (мг.) | Серебро (мг.) | |
| 2А599А-3…Г-3* | 19,34 | 4,822 |
Получившаяся таблица вместилась полностью заняв 51% мобильного экрана — 26+12+13 — 51%.
Пример 2 (Тоже из практики).
Таблица на четыре колонки
ДГМ в умножительных СВЧ диодах
Таблица с начальной шириной столбцов: 33+9+9+9:
| Умножительный СВЧ диод | Содержание драгоценных металлов | ||
|---|---|---|---|
| Зл. (мг.) | Ср. (мг.) | Пд. (мг.) | |
| 2А699А | 5,7592 | 1,6954 | — |
Ширина на экране мобильного телефона: 24+11+11+11 на 57%; (3-й столбец виден на 30%) 2. ДГМ в умножительных СВЧ диодах Уменьшаем шрифт для: «Умножительный» чем сужаем первый столбик. Также уменьшаем шрифт для цифровых данных из более чем пяти знаков, с целью сузить столбики с цифрами. Ширину столбцов устанавливаем: 20+10+10+9 и 49%:
| Умножительный СВЧ диод | Содержание драгметаллов | ||
| Зл. (мг.) | Ср. (мг.) | Пд. (мг.) | |
| 2А699А | 5,7592 | 1,6954 | — |
Таблица вместилась в весь 52%-экрана, но без отступа справа, что практически не заметно.
Выводы: Таблица в 3…4 столбика будет полностью видна в окне мобильного браузера при применении, подтверждённых на примерах, условий:
- используйте слова с минимальным количеством букв или заменяйте на короткие синонимы;
- выберите шрифт с меньшей шириной (самый узкий: PT Sans Narrow);
- применяйте меньший (но различимый) шрифт (применив тег HTML: «small» (Допустимый для комментариев и сносок);
- мелкий шрифт нужен также и для многозначных (пять и выше) числовых табличных данных.