Как сделать таблицу в тильде
Столкнулись с проблемой, где нужно добавить на страницу сайта большую таблицу Exсel? И не хочется делать все руками? Есть решение, как преобразовать данные с помощью простой формулы. Вам останется только перенести все одним копипастом.
Допустим, у нас есть огромная таблица с данными (представим, что она огромная):
Пример: исходная таблица в Excel.
Если мы будем переносить таблицу в блок CL46 (раздел Колонки), то выйдет вот такая глупость:
Чтобы избежать этого кривого копирования, нам нужно подготовить данные правильным образом.
В таблицу Excel добавляем ещё одну ячейку с символом ; и копируем ее на всю длину столбца (до конца контента).
Задаём формулу через =, поочередно выбирая ячейка&символ;&ячейка&символ;&ячейка и тд.
Здесь амперсанд (&) выступает связующим, а мы связываем все так, чтобы точка с запятой были между каждой ячейкой, его мы добавляем кнопкой на клавиатуре.
Как добавить таблицу, лэйбл, вторую кнопку и блок последовательность покупки блок ST300 в Tilda
Основа примера это блок магазина ST300
Этапы покупки сделали через блок Этапы►HW302
Остальное добавили через код
Пример не работает с каталогом
1. Создали блок ST300 и наполнили его контентом
2. Создали блок HW302 и наполнили его контентом
Добавили код 1 — Этапы на страницу в блок Другое►Т123
#rec68205726 — заменили на свой ID блока с этапами HW302
3. Добавили вторую кнопку в карточку , вставив код 2 — Вторая кнопка
В коде изменили стили на нужные нам и прописали свою ссылку и надпись:
href=»#»
Control Price — ссылка
4. Добавили метку HIT и ярлычок на фото товара. вставив код 3 — Label
Изменили надпись метки на HIT
5. Добавили таблицу в описание товара , вставив код 4 — Таблица
6. Добавили фото платёжных систем в карточку товара, вставив код 5 — Pay
Прописали путь до своей картинки https://clck.ru/ESZgz
Все коды были вставлены в блок Другое►Т123
Работа с таблицами
Посмотрите видеоурок о том, как создать или редактировать страницу или прочитайте подробную инструкцию ниже.
Блок «Таблица» находится в категории «Колонки» (CL46).
Создание строк, столбцов и шапки
Таблица состоит из строк и колонок. При добавлении контента столбцы разделяются символом точка с запятой — «;», а строки — переносом строки (нажатием клавиши «Enter»).
Пример данных для шапки:
Время;Тип занятия;Преподаватель
Пример данных для основной части:
08:00;Хатха-йога;Иванова Анна
10:30;Пилатес;Сидорова Алеся
13:00;Аэробика;Петрова Инесса
Изменение ширины и высоты
Ширина всей таблицы регулируется в настройках: можно задать количество колонок и отступ слева.
Ширина колонок регулируется в контенте, в поле, расположенном в самом низу. Единица измерения — проценты. Желательно следить, чтобы сумма значений ширины в процентах равнялась 100. Если поле оставить пустым, то колонки будут одинаковыми по ширине.
Пример задания ширины колонок:
Ссылки и кнопки
К тексту ячейки можно добавить ссылку или кнопку. Для этого достаточно поставить после него конструкцию вида: link=http://mylink.com или button=http://mylink.com — и все содержимое ячейки станет ссылкой или надписью на кнопке.
Пример добавления ссылки:
Билет;100$;Узнать больше link=http://tilda.cc
Пример добавления кнопки:
Билет;100$;Узнать больше button=http://tilda.cc
Если требуется открывать ссылки не в текущем окне, а в отдельной вкладке браузера, то установите галочку в Настройках таблицы → Вся таблица → Открывать ссылки в новой вкладке.
Мобильная версия
Есть два варианта отображения таблиц в мобильной версии:
1. Таблица сохраняет такой же размер, как в версии для больших экранов, и выходит за край маленького экрана .
2. Таблица сжимается до ширины экрана устройства.
Чтобы таблица сжималась до ширины экрана, нужно в настройках нажать галочку «Разрешить изменение ширины таблицы на мобильных устройствах».
Совет:разрешайте сжатие на мобильных устройствах для таблиц с небольшим количеством столбцов (2-3) и небольшим количеством контента (цифры, короткие фразы).
Примеры готовых таблиц
Настройки данной таблицы: Масштаб: 1, Цвет границ шапки таблицы: #000000, Цвет границ таблицы: #d9d9d9, Цвет фона нечетной строки: #ffffff, Цвет фона четной строки: #eeeeee, Проставлена галочка «Скрыть верхнюю границу таблицы»
Настройки данной таблицы: Масштаб: 2, Цвет текста в шапке таблицы: #ffffff, Цвет границ шапки таблицы: #ff8562, Цвет шапки таблицы: #ff8562, Цвет границ таблицы: #d9d9d9, Цвет фона нечетной строки: #ffffff , Цвет фона четной строки: #ffffff, Проставлена галочка «Разрешить изменение ширины таблицы на мобильных устройствах»
Как добавить таблицу в Тильду?
Добавить информацию табличного вида в Тильду очень просто. Воспользуемся стандартным блоком CL46, Таблица. Особенность его в очень простой механике заполнения: данные по столбцам отделяются точкой с запятой «;», а строки переносом строки. Сделать такую табличку очень просто в том же Excel, или Google Sheets, формат файла .csv. Для переноса данных в тильду файл надо открыть в текстовом редакторе, например, Notepad++ и перенести данные в блок Тильды. Разберем подробнее каждый этап.
Подготовка таблицы
Сохранять таблицу нужно обязательно в кодировке UTF-8 с BOM. Иначе в Тильда будут вместо текста кракозябры. Google Таблицы сохраняют в таком формате по умолчанию, поэтому для уменьшения лишних телодвижений лучше воспользоваться этим сервисом.
Для примера я возьму исходную таблицу с прайсом на медицинские анализы. В прайсе несколько столбцов, для посетителей сайта нам надо оставить только главное:
- Код анализа
- Наименование
- Стоимость
- Срок готовности
Заполним первую строчку таблицы:
Копируем данные из исходной таблички и заполняем разделы:
Название разделов лучше вписывать во второй столбец, чтобы текст помещался.
Сохраняем таблицу на свое устройство:
И открываем ее в текстовом редакторе, рекомендую Notepad++:
То, что нужно! Столбцы отделены точкой с запятой. Переходим к Тильде.
Заполнение блока в Тильде
На нужной странице добавляем блок CL46, Таблица. Настройки контента по умолчанию выглядят так:
Копируем первую строчку из таблицы в Notepad++ и вставляем ее в Шапку.
Копируем остальные строки и вставляем в Содержимое таблицы.
Столбцов в таблице у нас 4, поэтому подредактируем поле Ширина колонок:
Ширина задается в процентах от общей ширины таблицы, т. е. сумма всех колонок не должна быть больше 100%. Самое широкое поле нужно для Наименования, там задаем 55%, остальное делим между оставшимися.
Сохраняем блок и получаем табличку в Тильда.
В настройках блока можно подредактировать вид таблицы под общий стиль и поведение на разных экранах.
Все 2000 строк не стоит делать одной таблицей, большие объемы информации следует разделять, в нашем случае можно делать разделы из строк с желтой заливкой в оригинальной таблице. Т.е. на странице будет несколько таблиц, логически состоящих из анализов одного типа.