Айдегин - блог Tilda-вебмастера

Как добавить таблицу в Тильду?

tilda
Добавить информацию табличного вида в Тильду очень просто. Воспользуемся стандартным блоком CL46, Таблица. Особенность его в очень простой механике заполнения: данные по столбцам отделяются точкой с запятой «;», а строки переносом строки. Сделать такую табличку очень просто в том же Excel, или Google Sheets, формат файла .csv. Для переноса данных в тильду файл надо открыть в текстовом редакторе, например, Notepad++ и перенести данные в блок Тильды. Разберем подробнее каждый этап.

Подготовка таблицы

Сохранять таблицу нужно обязательно в кодировке UTF-8 с BOM. Иначе в Тильда будут вместо текста кракозябры. Google Таблицы сохраняют в таком формате по умолчанию, поэтому для уменьшения лишних телодвижений лучше воспользоваться этим сервисом.
Для примера я возьму исходную таблицу с прайсом на медицинские анализы. В прайсе несколько столбцов, для посетителей сайта нам надо оставить только главное:
  • Код анализа
  • Наименование
  • Стоимость
  • Срок готовности

Заполним первую строчку таблицы:


Копируем данные из исходной таблички и заполняем разделы:
Название разделов лучше вписывать во второй столбец, чтобы текст помещался.

Сохраняем таблицу на свое устройство:


И открываем ее в текстовом редакторе, рекомендую Notepad++:
То, что нужно! Столбцы отделены точкой с запятой. Переходим к Тильде.

Заполнение блока в Тильде

На нужной странице добавляем блок CL46, Таблица. Настройки контента по умолчанию выглядят так:

Копируем первую строчку из таблицы в Notepad++ и вставляем ее в Шапку.
Копируем остальные строки и вставляем в Содержимое таблицы.

Столбцов в таблице у нас 4, поэтому подредактируем поле Ширина колонок:

Ширина задается в процентах от общей ширины таблицы, т. е. сумма всех колонок не должна быть больше 100%. Самое широкое поле нужно для Наименования, там задаем 55%, остальное делим между оставшимися.

Сохраняем блок и получаем табличку в Тильда.

В настройках блока можно подредактировать вид таблицы под общий стиль и поведение на разных экранах.

Все 2000 строк не стоит делать одной таблицей, большие объемы информации следует разделять, в нашем случае можно делать разделы из строк с желтой заливкой в оригинальной таблице. Т.е. на странице будет несколько таблиц, логически состоящих из анализов одного типа.
Made on
Tilda