Существует множество часто встречающихся примеров использования викитекста, который отлично отображается на экране компьютера, но не всегда хорошо на экране мобильного. Один из таких примеров — вложенные таблицы.
- В качестве напоминания: вы всегда можете посмотреть, как страница выглядит на мобильном устройстве, для этого добавьте к адресу URL
?useskin=fandommobile. Также вы можете это увидеть в режиме предпросмотра, выбрав в выпадающем меню «мобильный скин».
- В качестве напоминания: вы всегда можете посмотреть, как страница выглядит на мобильном устройстве, для этого добавьте к адресу URL
Что такое вложенные таблицы[]
Вложенные таблицы — это таблицы внутри таблиц.
- Вот пример вложенных таблиц с одной английской вики. Посмотрите на разницу между отображением на экране компьютера и на экране мобильного телефона.
Чем плохи вложенные таблицы[]
По возможности, старайтесь избегать вложенных таблиц. Как правило, ширина таблицы ограничена, а вот вертикально она может растягиваться настолько, насколько это необходимо. Если же таблицу помещают в другую таблицу, ширина подстраивается под эту дополнительную таблицу, и случается так, что в целом эта таблица по ширине больше, чем свободного места на странице. Это особенно хорошо заметно на маленьком экране смартфона, так как его ширина значительно меньше, чем экран компьютера. Это приводит к появлению горизонтальной полосы прокрутки на мобильных, либо к тому, что часть таблицы становится не видна.
Если же разбить вложенные таблицы на несколько отдельных, для просмотра информации нужно будет использовать вертикальную полосу прокрутки, что значительно удобнее. Также это позволит расположению таблиц быть более динамичным — мобильный браузер будет сам размещать таблицы так, как это позволяет место на экране.
Что делать, если на вики есть вложенные таблицы[]
В этом случае надо попытаться отказаться от них и придумать другую структуру страницы. Таблицы используются для более наглядного отображения информации, и часто эту информацию можно представить и в нескольких отдельных таблицах, или в одной большой таблице.
Как избавиться от вложенных таблиц[]
Как определить, что на вики есть вложенные таблицы[]
В исходном коде таблицы начинаются с {| или <table>, а закрываются с помощью кода |} или </table>. Таким образом, если вы видите начало таблицы, и до её окончания вам встречается начало еще одной или нескольких таблиц, они являются вложенными.
Как разделить вложенные таблицы[]
Сначала определите, сколько именно таблиц вложено одна в другую. Затем найдите самую последнюю, и вынесите её отдельно. Потом нажмите «предпросмотр» и посмотрите, как эта таблица выглядит отдельно. Также вы можете изменить параметры таблицы, чтобы она лучше отображалась. То же самое повторите и с другими таблицами.
Что делать дальше[]
Таблицы должны располагаться одна над другой, или одна за одной. Это позволит мобильным браузерам перемещать их и располагать так, как это будет удобнее для просмотра с экрана смартфона. Если таблицы расположены одна за другой и не помещаются на экран, браузер переместит одну из них вниз.
Тем не менее, вам придется искать компромисс между тем, как таблица выглядит на большом экране компьютера и на маленьком экране мобильного. Возможно, для этого потребуется CSS. Дело в том, что CSS меняет только вид страницы в полной версии браузера, а в мобильной версии эти дополнительные стили игнорируются.
Дополнительная информация[]
Помните, что если вложенные таблицы используются в шаблонах, то их исправление лучше начать именно с последних. Ведь шаблоны используются на множестве страниц, соответственно, при исправлении шаблона улучшится отображение в мобильном скине сразу множества страниц.
Изображение, помещённое в отдельную ячейку, заставляет ячейку принять определённый размер, соответствующий размеру изображения. Таким образом, изображение должно быть того размера, который будет корректно отображаться на экране мобильных. Также можно вообще убрать изображения из таблицы. Если изображение большое и расположено вне таблицы, мобильный браузер автоматически подстроит его размер под размер экрана.
Пример[]
В качестве примера того, как можно избавиться от вложенных таблиц, можно привести англоязычную вики Brave Frontier. Участники смогли не только убрать вложенные таблицы из наиболее важного шаблона, но и сохранить прекрасный вид страниц для экранов компьютеров. А отображение страниц в мобильном скине значительно улучшилось. Смотрите сами:
Вы также можете ознакомиться с исходным кодом шаблонов:
- Примечание: шаблоны защищены от редактирования, но вы можете скопировать их и использовать в своих целях.
См. также[]
Свяжитесь с сотрудниками[]
Если вам нужна помочь с вложенными таблицами на вашей вики, свяжитесь с сотрудниками через поддержку. Пожалуйста, добавьте в тему Mobile: Nested tables.